<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 profile"/>
    <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="Profiles"/>
                </ui:define>

                <rich:dataTable id="profileTable"
                                value="#{profileManager.profiles}" var="profile"
                                rows="#{dataScrollerMemory.numberOfResultsPerPage}"
                                render="ds">
                    <g:column sortBy="#{'id'}" sortOrder="descending">
                        <ui:define name="header">Id</ui:define>
                        <h:outputText value="#{profile.id}"/>
                    </g:column>
                    <g:column sortBy="#{'xdstools_name'}" filterBy="#{'xdstools_name'}">
                        <ui:define name="header">Xdstools name</ui:define>
                        <rich:inplaceInput value="#{profile.xdstoolsName}" showControls="true">
                            <a4j:ajax event="change" listener="#{profileManager.merge(profile)}"/>
                        </rich:inplaceInput>
                    </g:column>
                    <g:column sortBy="#{'tm_name'}" filterBy="#{'tm_name'}">
                        <ui:define name="header">TM name</ui:define>
                        <rich:inplaceInput value="#{profile.tmName}" showControls="true">
                            <a4j:ajax event="change" listener="#{profileManager.merge(profile)}"/>
                        </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 a profile"
                                       actionListener="#{profileManager.addNewProfile()}"
                                       render="newProfileForm"/>
                </ui:define>
            </ui:decorate>
        </h:form>

        <h:form id="newProfileForm">
            <gri:panel rendered="#{profileManager.isAddProfile()}">


                <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="#{profileManager.newProfile.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="#{profileManager.newProfile.tmName}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>

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

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

    </ui:define>

</ui:composition>