<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 calling tools"/>
    <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="Calling tools"/>
                </ui:define>

                <rich:dataTable id="callingToolTable"
                                value="#{callingToolManager.callingTools}" var="callingTool"
                                rows="#{dataScrollerMemory.numberOfResultsPerPage}"
                                render="ds">
                    <g:column sortBy="#{'id'}" sortOrder="descending">
                        <ui:define name="header">Id</ui:define>
                        <h:outputText value="#{callingTool.id}"/>
                    </g:column>
                    <g:column sortBy="#{'label'}" filterBy="#{'label'}">
                        <ui:define name="header">Name</ui:define>
                        <rich:inplaceInput value="#{callingTool.label}" showControls="true">
                            <a4j:ajax event="change" listener="#{callingToolManager.merge(callingTool)}"/>
                        </rich:inplaceInput>
                    </g:column>
                    <g:column sortBy="#{'oid'}" filterBy="#{'oid'}">
                        <ui:define name="header">OID</ui:define>
                        <rich:inplaceInput value="#{callingTool.oid}" showControls="true">
                            <a4j:ajax event="change" listener="#{callingToolManager.merge(callingTool)}"/>
                        </rich:inplaceInput>
                    </g:column>
                    <g:column sortBy="#{'url'}" filterBy="#{'url'}">
                        <ui:define name="header">Url</ui:define>
                        <rich:inplaceInput value="#{callingTool.url}" showControls="true">
                            <a4j:ajax event="change" listener="#{callingToolManager.merge(callingTool)}"/>
                        </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 calling tool"
                                       actionListener="#{callingToolManager.addNewCallingTool()}"
                                       render="newCallingToolForm"/>
                </ui:define>
            </ui:decorate>
        </h:form>

        <h:form id="newCallingToolForm">
            <gri:panel rendered="#{callingToolManager.isAddCallingTool()}">


                <s:decorate template="/layout/form/_edit.xhtml">
                    <ui:param name="id" value="nameInput"/>
                    <ui:define name="label">Name</ui:define>
                    <h:inputText id="nameInput" value="#{callingToolManager.newCallingTool.label}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>
                <s:decorate template="/layout/form/_edit.xhtml">
                    <ui:param name="id" value="oidInput"/>
                    <ui:define name="label">OID</ui:define>
                    <h:inputText id="oidInput" value="#{callingToolManager.newCallingTool.oid}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>
                <s:decorate template="/layout/form/_edit.xhtml">
                    <ui:param name="id" value="urlInput"/>
                    <ui:define name="label">URL</ui:define>
                    <h:inputText id="urlInput" value="#{callingToolManager.newCallingTool.url}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>


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

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

    </ui:define>

</ui:composition>