<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="SoapUI project detail"/>
    <ui:define name="body">
        <h:form>
            <s:div id="pageDiv">
                <gri:panel>
                    <f:facet name="header">
                        <h:outputText value="General information"/>
                    </f:facet>

                    <s:decorate template="/layout/display/_display.xhtml"
                                rendered="#{projectDetail.editProject == false}">
                        <ui:define name="label">Project name</ui:define>
                        <h:outputText value="#{projectDetail.projectDetail.soapuiProject.label}"/>
                    </s:decorate>

                    <s:decorate template="/layout/form/_edit.xhtml" rendered="#{projectDetail.editProject}">
                        <ui:param name="id" value="nameInput"/>
                        <ui:define name="label">Project name</ui:define>
                        <h:inputText id="nameInput" value="#{projectDetail.projectDetail.soapuiProject.label}"
                                     required="true" styleClass="form-control"/>
                    </s:decorate>

                    <s:decorate template="/layout/display/_display.xhtml">
                        <ui:define name="label">Version</ui:define>
                        <h:outputText value="#{projectDetail.projectDetail.soapuiProject.version}"/>
                    </s:decorate>

                    <s:decorate template="/layout/display/_display.xhtml">
                        <ui:define name="label">Owner</ui:define>
                        <h:outputText value="#{projectDetail.projectDetail.soapuiProject.owner}"/>
                    </s:decorate>

                    <s:decorate template="/layout/display/_display.xhtml">
                        <ui:define name="label">Creation Date</ui:define>
                        <h:outputText value="#{projectDetail.projectDetail.soapuiProject.creationDate}"/>
                    </s:decorate>

                    <s:decorate template="/layout/display/_display.xhtml"
                                rendered="#{projectDetail.editProject == false}">
                        <ui:define name="label">Keystore</ui:define>
                        <h:outputText value="#{projectDetail.projectDetail.soapuiProject.keystore.label}"
                                      rendered="#{projectDetail.projectDetail.soapuiProject.keystore != null}"/>
                        <h:outputText
                                value="No keystore selected : the default keystore of the application will be used."
                                rendered="#{projectDetail.projectDetail.soapuiProject.keystore == null}"/>
                    </s:decorate>

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

                    <s:decorate template="/layout/display/_display.xhtml">
                        <ui:define name="label">Activated ?</ui:define>
                        <h:selectBooleanCheckbox disabled="#{projectDetail.editProject == false}"
                                                 value="#{projectDetail.projectDetail.soapuiProject.active}"/>
                    </s:decorate>

                    <gri:panel>
                        <f:facet name="header">
                            <h:outputText value="Project hierarchy"/>
                        </f:facet>
                        <div class="row">
                            <div class="col-md-6">
                                <rich:tree id="treeOfParams" value="#{projectDetail.projectDetail.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}"
                                                                 disabled="#{projectDetail.editProject == false}"/>
                                        <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                         actionListener="#{projectDetail.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}"
                                                                 disabled="#{projectDetail.editProject == false}"/>
                                        <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                         actionListener="#{projectDetail.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}"
                                                                 disabled="#{projectDetail.editProject == false}"/>
                                        <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                         actionListener="#{projectDetail.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}"
                                                                 disabled="#{projectDetail.editProject == false}"/>
                                        <a4j:commandLink render="paramPanel" ajaxSingle="true"
                                                         actionListener="#{projectDetail.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>

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

                                        <rich:panel styleClass="gzl-alert gzl-alert-blue"
                                                    rendered="#{empty projectDetail.projectDetail.customPropertyList}">
                                            <h:outputText
                                                    value="There is no custom properties for this component."/>
                                        </rich:panel>
                                    </gri:panel>
                                </s:div>
                            </div>
                        </div>
                    </gri:panel>
                    <f:facet name="footer">
                        <a4j:commandButton value="Activate project"
                                           action="#{projectDetail.projectDetail.setActive(true)}"
                                           styleClass="gzl-btn-blue"
                                           rendered="#{projectDetail.editProject == false and s:hasRole('admin_role') and projectDetail.projectDetail.soapuiProject.active == false}"
                                           render="pageDiv"/>
                        <a4j:commandButton value="Edit" action="#{projectDetail.setEditProject(true)}"
                                           styleClass="gzl-btn-blue"
                                           rendered="#{projectDetail.editProject == false and s:hasRole('admin_role')}"
                                           render="pageDiv"/>
                        <h:commandButton value="Save" action="#{projectDetail.saveEditProject()}"
                                         styleClass="gzl-btn-blue" render="pageDiv"
                                         rendered="#{projectDetail.editProject}"/>
                        <h:commandButton value="Cancel" action="#{projectDetail.setEditProject(false)}"
                                         styleClass="gzl-btn" rendered="#{projectDetail.editProject}" immediate="true"
                                         render="pageDiv"/>
                        <h:commandButton value="Back to list" action="/project/projectList.seam" styleClass="gzl-btn"/>
                    </f:facet>
                </gri:panel>
            </s:div>
        </h:form>
    </ui:define>
</ui:composition>