<ui:composition xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/schema/seam/taglib"
                xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j"
                xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:rich="http://richfaces.org/rich"
                xmlns:gri="http://java.sun.com/jsf/composite/gri" xmlns="http://www.w3.org/1999/xhtml"
                template="//layout/template.xhtml">
    <ui:param name="pageNameTitle" value="Upload a SoapUI project"/>
    <ui:define name="body">
        <h:form>
            <s:div id="globalDiv">
                <gri:panel>
                    <f:facet name="header">
                        <h:outputText value="Upload"/>
                    </f:facet>
                    <s:div id="uploadFile">
                        <s:div rendered="#{uploadProject.soapuiProject == null}">
                            <h:outputText id="fileUploadInfo"
                                          value="Please upload the SoapUi project"/>


                            <rich:fileUpload id="uploadSoapUIFile"
                                             fileUploadListener="#{uploadProject.uploadEventListener}"
                                             maxFilesQuantity="1"
                                             acceptedTypes="xml"
                                             listHeight="60px"
                                             immediateUpload="true"
                                             ontyperejected="ontyperejected()">
                                <a4j:ajax event="uploadcomplete" render="globalDiv"/>

                            </rich:fileUpload>

                            <a4j:jsFunction name="ontyperejected"
                                            actionListener="#{uploadProject.setMessageInvalidFileType()}"/>
                        </s:div>

                        <s:div id="downloadedFile">
                            <s:div rendered="#{uploadProject.soapuiProject != null}">
                                <ui:decorate template="/layout/panels/_panel_id.xhtml">
                                    <ui:param name="panel_id" value="fileNameInfo"/>
                                    <s:decorate id="fileNameInfoDecoration" template="/layout/display/_display.xhtml">
                                        <ui:define name="label"> File upload</ui:define>
                                        <h:outputText value="#{uploadProject.soapuiProject.xmlFilePath}">
                                        </h:outputText>
                                    </s:decorate>
                                </ui:decorate>

                                <gri:panel pid="projectInfo">
                                    <f:facet name="header">
                                        <h:outputText value="SoapUI project informations"/>
                                    </f:facet>

                                    <s:decorate template="/layout/display/_display.xhtml">
                                        <ui:define name="label">Label</ui:define>
                                        <rich:inplaceInput value="#{uploadProject.soapuiProject.label}"
                                                           showControls="true" inputWidth="90%">
                                            <a4j:ajax event="change" render="projectInfo"/>
                                        </rich:inplaceInput>
                                    </s:decorate>

                                    <s:decorate template="/layout/form/_checkbox.xhtml">
                                        <ui:define name="label">Activate</ui:define>
                                        <h:selectBooleanCheckbox value="#{uploadProject.soapuiProject.active}">
                                            <a4j:ajax event="change" render="projectInfo"/>
                                        </h:selectBooleanCheckbox>
                                    </s:decorate>

                                    <s:decorate template="/layout/form/_edit.xhtml"
                                                rendered="#{uploadProject.getAllKeystore() != null}">
                                        <ui:param name="id" value="selectKeystore"/>
                                        <ui:define name="label">Keystore</ui:define>
                                        <h:selectOneMenu id="selectKeystore" styleClass="form-control"
                                                         value="#{uploadProject.soapuiProject.keystore}"
                                                         required="false">
                                            <f:selectItem itemValue="#{null}" itemLabel="Please select..."/>
                                            <f:selectItems value="#{uploadProject.getAllKeystore()}" var="keystore"
                                                           itemLabel="#{keystore.label}"/>
                                            <f:converter converterId="keystoreConverter"/>
                                        </h:selectOneMenu>
                                    </s:decorate>

                                </gri:panel>

                                <gri:panel>
                                    <f:facet name="header">
                                        <h:outputText value="Project hierarchy"/>
                                    </f:facet>

                                    <rich:panel styleClass="gzl-alert gzl-alert-blue">
                                        <h:outputText
                                                value="Select which test component can be executed and select the parameters that the user will need to set when executing the project"/>
                                    </rich:panel>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <rich:tree id="treeOfParams" value="#{uploadProject.tree}" var="node">
                                                <rich:treeNode iconExpanded="images/teststep.png"
                                                               iconCollapsed="images/teststep.png"
                                                               rendered="#{node.data.getClass().getSimpleName() == 'GwtTestStep'}"
                                                               expanded="#{node.data.expendedInTree}">
                                                    <h:selectBooleanCheckbox value="#{node.data.executable}"/>
                                                    <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                                     actionListener="#{uploadProject.setCustomPropertyList(node.data.customProperties)}"
                                                                     value="#{node.data.label} [#{node.data.numberOfCustumProperties()}]"/>
                                                </rich:treeNode>
                                                <rich:treeNode iconExpanded="images/testcase.png"
                                                               iconCollapsed="images/testcase.png"
                                                               rendered="#{node.data.getClass().getSimpleName() == 'GwtTestCase'}"
                                                               expanded="#{node.data.expendedInTree}">
                                                    <h:selectBooleanCheckbox value="#{node.data.executable}"/>
                                                    <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                                     actionListener="#{uploadProject.setCustomPropertyList(node.data.customProperties)}"
                                                                     value="#{node.data.label} [#{node.data.numberOfCustumProperties()}]"/>
                                                </rich:treeNode>
                                                <rich:treeNode iconExpanded="images/testsuite.png"
                                                               iconCollapsed="images/testsuite.png"
                                                               rendered="#{node.data.getClass().getSimpleName() == 'GwtTestSuite'}"
                                                               expanded="#{node.data.expendedInTree}">
                                                    <h:selectBooleanCheckbox value="#{node.data.executable}"/>
                                                    <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                                     actionListener="#{uploadProject.setCustomPropertyList(node.data.customProperties)}"
                                                                     value="#{node.data.label} [#{node.data.numberOfCustumProperties()}]"/>
                                                </rich:treeNode>
                                                <rich:treeNode iconExpanded="images/project.png"
                                                               iconCollapsed="images/project.png"
                                                               rendered="#{node.data.getClass().getSimpleName() == 'GwtProject'}"
                                                               expanded="#{node.data.expendedInTree}">
                                                    <h:selectBooleanCheckbox value="#{node.data.executable}"/>
                                                    <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                                     actionListener="#{uploadProject.setCustomPropertyList(node.data.customProperties)}"
                                                                     value="#{node.data.label} [#{node.data.numberOfCustumProperties()}]"/>
                                                </rich:treeNode>
                                            </rich:tree>
                                        </div>
                                        <div class="col-md-6">
                                            <s:div id="paramPanel">
                                                <gri:panel>
                                                    <f:facet name="header">
                                                        <h:outputText value="Parameters"/>
                                                    </f:facet>

                                                    <s:div rendered="#{not empty uploadProject.customPropertyList}">
                                                        <rich:list value="#{uploadProject.customPropertyList}"
                                                                   id="list"
                                                                   var="paramList" type="unordered">
                                                            <s:decorate template="/layout/form/_checkbox.xhtml">
                                                                <h:selectBooleanCheckbox
                                                                        value="#{paramList.toModify}"/>
                                                                <s:decorate
                                                                        template="/layout/display/_display.xhtml">
                                                                    <ui:define name="label">#{paramList.label}
                                                                    </ui:define>
                                                                    <h:outputText
                                                                            value="#{paramList.defaultValue}"/>
                                                                </s:decorate>
                                                            </s:decorate>
                                                        </rich:list>
                                                        <s:decorate template="/layout/form/_checkbox.xhtml">
                                                            <h:selectBooleanCheckbox
                                                                    value="#{uploadProject.checkAllProperties}"
                                                                    valueChangeListener="#{uploadProject.checkAll}">
                                                                <f:ajax render="@form"/>
                                                            </h:selectBooleanCheckbox>
                                                            <h:outputText value="Select all the custom properties"/>
                                                        </s:decorate>
                                                    </s:div>

                                                    <rich:panel styleClass="gzl-alert gzl-alert-blue"
                                                                rendered="#{empty uploadProject.customPropertyList}">
                                                        <h:outputText
                                                                value="There is no custom properties for this component."/>
                                                    </rich:panel>


                                                </gri:panel>
                                            </s:div>
                                        </div>
                                    </div>
                                </gri:panel>
                            </s:div>
                        </s:div>


                    </s:div>
                    <f:facet name="footer">
                        <h:commandButton styleClass="gzl-btn-blue"
                                         value="Upload"
                                         action="#{uploadProject.redirectToDetail()}"
                                         rendered="#{uploadProject.soapuiProject != null}"/>
                        <a4j:commandButton id="resetButton" styleClass="gzl-btn" value="Reset"
                                           actionListener="#{uploadProject.resetSimple()}" render="@form"
                                           execute="globalDiv"/>
                    </f:facet>
                </gri:panel>
            </s:div>
        </h:form>
    </ui:define>
</ui:composition>