<ui:composition xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/schema/seam/taglib"
                xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:rich="http://richfaces.org/rich"
                xmlns:g="http://www.ihe.net/gazelle" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:a4j="http://richfaces.org/a4j" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:gri="http://java.sun.com/jsf/composite/gri"
                template="/layout/template.xhtml">
    <ui:param name="pageNameTitle" value="Manage option"/>
    <ui:define name="body">
        <h:form id="globalForm">


            <ui:decorate template="/layout/panels/_panel_title_footer.xhtml">
                <ui:define name="panel_title">
                    <h:outputText value="Options"/>
                </ui:define>

                <rich:dataTable id="callingToolTable"
                                value="#{optionManager.options}" var="option"
                                rows="#{dataScrollerMemory.numberOfResultsPerPage}"
                                render="ds">
                    <g:column sortBy="#{'id'}" sortOrder="descending">
                        <ui:define name="header">Id</ui:define>
                        <h:outputText value="#{option.id}"/>
                    </g:column>
                    <g:column sortBy="#{'description'}" filterBy="#{'description'}">
                        <ui:define name="header">Description</ui:define>
                        <rich:inplaceInput value="#{option.description}" showControls="true">
                            <a4j:ajax event="change" listener="#{optionManager.merge(actorType)}"/>
                        </rich:inplaceInput>
                    </g:column>
                    <g:column sortBy="#{'xdstools_name'}" filterBy="#{'xdstools_name'}">
                        <ui:define name="header">Xdstools name</ui:define>
                        <rich:inplaceInput value="#{option.xdstoolsName}" showControls="true">
                            <a4j:ajax event="change" listener="#{optionManager.merge(option)}"/>
                        </rich:inplaceInput>
                    </g:column>
                    <g:column sortBy="#{'tm_name'}" filterBy="#{'tm_name'}">
                        <ui:define name="header">TM name</ui:define>
                        <rich:inplaceInput value="#{option.tmName}" showControls="true">
                            <a4j:ajax event="change" listener="#{optionManager.merge(option)}"/>
                        </rich:inplaceInput>
                    </g:column>
                    <f:facet name="footer">
                        <ui:include src="/util/datatableFooter.xhtml">
                            <ui:param name="dataScrollerId" value="ds"/>
                            <ui:param name="dataTableId" value="projectsTable"/>
                        </ui:include>
                    </f:facet>
                </rich:dataTable>

                <ui:define name="panel_footer">
                    <a4j:commandButton styleClass="gzl-btn-blue" value="Add an option"
                                       actionListener="#{optionManager.addNewOption()}"
                                       render="newOptionForm"/>
                </ui:define>
            </ui:decorate>
        </h:form>

        <h:form id="newOptionForm">
            <gri:panel rendered="#{optionManager.isAddOption()}">


                <s:decorate template="/layout/form/_edit.xhtml">
                    <ui:param name="id" value="xdsNameInput"/>
                    <ui:define name="label">Xdstools name</ui:define>
                    <h:inputText id="xdsNameInput" value="#{optionManager.newOption.xdstoolsName}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>
                <s:decorate template="/layout/form/_edit.xhtml">
                    <ui:param name="id" value="tmNameInput"/>
                    <ui:define name="label">TM name</ui:define>
                    <h:inputText id="tmNameInput" value="#{optionManager.newOption.tmName}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>

                <f:facet name="footer">
                    <a4j:commandButton id="mergeCallingTool" styleClass="gzl-btn-green" value="Validate"
                                       actionListener="#{optionManager.merge()}"
                                       render="globalForm, newOptionForm"/>
                    <a4j:commandButton id="cancel" styleClass="gzl-btn" value="Cancel"
                                       actionListener="#{optionManager.cancel()}"
                                       render="globalForm, newOptionForm" immediate="true"/>
                </f:facet>

            </gri:panel>
        </h:form>

    </ui:define>

</ui:composition>