<!--
  ~ EVS Client is part of the Gazelle Test Bed
  ~ Copyright (C) 2006-2016 IHE
  ~ mailto :eric DOT poiseau AT inria DOT fr
  ~
  ~ See the NOTICE file distributed with this work for additional information
  ~ regarding copyright ownership.  This code is licensed
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<ui:composition xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/schema/seam/taglib"
                xmlns:g="http://www.ihe.net/gazelle" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:rich="http://richfaces.org/rich" xmlns:gdk="http://www.ihe.net/gazellecdk"
                xmlns:a4j="http://richfaces.org/a4j" xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns="http://www.w3.org/1999/xhtml" template="//layout/template.xhtml">
    <ui:param name="pageName" value="#{messages['gazelle.evs.client.ConfigureMenubar']}"/>
    <ui:param name="pageNameUrl" value="administration/menuConfiguration.seam"/>
    <ui:param name="pageNameTitle" value="#{messages['gazelle.evs.client.ConfigureMenubar']}"/>
    <ui:define name="body">
        <s:div id="globalDiv">

            <h:form id="listForm">
                <s:token id="menuConfTokenId" allowMultiplePosts="true"/>
                <s:div rendered="#{menuGroupManager.displayList}">

                    <ui:decorate template="/layout/panels/_panel_title_footer_id.xhtml">

                        <ui:param name="panel_id" value="menuList"/>


                        <ui:define name="panel_title">
                            <h:outputText value="#{messages['gazelle.evs.client.MenuList']}"/>
                        </ui:define>

                        <rich:dataTable value="#{menuGroupManager.menuGroups}" var="group">
                            <g:column>
                                <ui:define name="header">#{messages['gazelle.evs.client.Order']}</ui:define>
                                <h:outputText value="#{group.orderInGui}"/>
                            </g:column>
                            <g:column>
                                <ui:define name="header">#{messages['gazelle.evs.client.Label']}</ui:define>
                                <h:panelGrid columns="3">
                                    <h:graphicImage value="#{group.iconPath}" height="26px"
                                                    width="26px"/>

                                    <h:outputText value="#{group.label}"/>
                                </h:panelGrid>
                            </g:column>
                            <g:column>
                                <ui:define name="header">#{messages['gazelle.evs.client.Available']}</ui:define>
                                <h:outputText value="#{messages['gazelle.common.yes']}" rendered="#{group.available}"/>
                                <h:outputText value="#{messages['gazelle.common.no']}" rendered="#{not group.available}"/>
                            </g:column>
                            <g:column>
                                <ui:define name="header">#{messages['net.ihe.gazelle.evs.VisibleToAll']}</ui:define>
                                <h:outputText value="#{messages['gazelle.common.yes']}" rendered="#{group.visibleToAll}"/>
                                <h:outputText value="#{messages['gazelle.common.no']}" rendered="#{not group.visibleToAll}"/>
                            </g:column>
                            <g:column>
                                <ui:define name="header">#{messages['gazelle.evs.client.StandardsToDisplay']}</ui:define>
                                <rich:list value="#{group.standards}" var="std" type="unordered">
                                    <h:outputText value="#{std.label}"/>
                                </rich:list>
                            </g:column>
                            <g:column>
                                <ui:define name="header">#{messages['gazelle.evs.client.Action']}</ui:define>
                                <div class="gzl-never-wrap">
                                    <a4j:commandLink
                                            title="#{messages['gazelle.evs.client.EditMenuGroup']}" execute="menuConfTokenId"
                                            styleClass="action"
                                            render="listForm, editionForm"
                                            actionListener="#{menuGroupManager.setSelectedMenuGroup(group)}">
                                        <s:span styleClass="gzl-icon-pencil text-info"/>
                                    </a4j:commandLink>
                                    <a4j:commandLink
                                            title="#{messages['net.ihe.gazelle.evs.Delete']}" oncomplete="jq162('#delete_menu').modal('show');"
                                            actionListener="#{menuGroupManager.setSelectedMenuGroup(group)}" render="delete_menu_form"  execute="menuConfTokenId">
                                        <s:span styleClass="gzl-icon-trash-o  text-info"/>
                                    </a4j:commandLink>
                                    <a4j:commandLink
                                            title="#{messages['net.ihe.gazelle.EVSClient-ui.MoveUp']}" execute="menuConfTokenId"
                                            styleClass="action"
                                            render="listForm, menuToolBar" rendered="#{group.orderInGui gt 1}"
                                            actionListener="#{menuGroupManager.moveGroupUp(group)}">
                                        <s:span styleClass="gzl-icon-up text-info"/>
                                    </a4j:commandLink>
                                    <a4j:commandLink
                                            title="#{messages['net.ihe.gazelle.EVSClient-ui.MoveDown']}" execute="menuConfTokenId"
                                            styleClass="action"
                                            render="listForm, menuToolBar" rendered="#{group.orderInGui lt menuGroupManager.menuGroups.size()}"
                                            actionListener="#{menuGroupManager.moveGroupDown(group)}">
                                        <s:span styleClass="gzl-icon-down text-info"/>
                                    </a4j:commandLink>
                                </div>
                            </g:column>
                        </rich:dataTable>
                        <ui:define name="panel_footer">
                            <a4j:commandButton value="#{messages['gazelle.evs.client.CreateANewMenuGroup']}"
                                               actionListener="#{menuGroupManager.createNewGroup()}" styleClass="gzl-btn-blue"
                                               render="listForm, editionForm" execute="menuConfTokenId"/>
                        </ui:define>

                    </ui:decorate>
                </s:div>
            </h:form>

            <h:form id="editionForm">
                <s:token id="editMenuConfTokenId" allowMultiplePosts="true"/>
                <s:div rendered="#{not menuGroupManager.displayList and menuGroupManager.selectedMenuGroup != null}">

                    <ui:decorate template="/layout/panels/_panel_title_footer_id.xhtml">

                        <ui:param name="panel_id" value="menuListEdition"/>
                        <ui:define name="panel_title">
                            <h:outputText value="#{messages['net.ihe.gazelle.EVSClient-ui.MenuGroupAddition']}" rendered="#{menuGroupManager.selectedMenuGroup.getCreation()}"/>
                            <h:outputText value="#{messages['gazelle.evs.client.MenuGroupEdition']}" rendered="#{!menuGroupManager.selectedMenuGroup.getCreation()}"/>
                        </ui:define>

                        <s:div styleClass="form-horizontal">

                            <s:decorate id="menuLabel" template="/layout/form/_form_field_horizontal_3-9.xhtml">
                                <ui:param name="id" value="labelInputId"/>
                                <ui:define name="label">#{messages['gazelle.evs.client.Label']}</ui:define>
                                <h:inputText id="labelInputId" value="#{menuGroupManager.selectedMenuGroup.label}" required="true"
                                             styleClass="form-control">
                                    <a4j:ajax  event="blur" render="menuLabel" execute="@this"/>
                                </h:inputText>
                            </s:decorate>
                            <s:decorate  template="/layout/form/_form_field_horizontal_3-9.xhtml">
                                <ui:param name="id" value="editIconPathId"/>
                                <ui:define name="label">#{messages['gazelle.evs.client.PathToIcon']}</ui:define>
                                <h:inputText  value="#{menuGroupManager.selectedMenuGroup.iconPath}" id="editIconPathId"
                                              size="100" required="true" styleClass="form-control">
                                    <a4j:ajax  event="blur" render="iconDisplay" execute="@this"/>
                                </h:inputText>
                            </s:decorate>
                            <s:decorate id="iconDisplay" template="/layout/form/_form_field_horizontal_3-9.xhtml">
                                <ui:define name="label">#{messages['gazelle.evs.client.SelectedIcon']}</ui:define>
                                <h:graphicImage value="#{menuGroupManager.selectedMenuGroup.iconPath}" height="26px"
                                                width="26px"/>
                            </s:decorate>
                            <s:decorate template="/layout/form/_form_checkbox_horizontal_inline.xhtml">
                                <ui:param name="id" value="availableCheckBox"/>
                                <h:selectBooleanCheckbox id="availableCheckBox"  styleClass="form-control" value="#{menuGroupManager.selectedMenuGroup.available}"/>
                                #{messages['gazelle.evs.client.isAvailable']}
                            </s:decorate>

                            <s:decorate template="/layout/form/_form_checkbox_horizontal_inline.xhtml">
                                <ui:param name="id" value="visibleToAllCheckBox"/>
                                <h:selectBooleanCheckbox id="visibleToAllCheckBox"  styleClass="form-control" value="#{menuGroupManager.selectedMenuGroup.visibleToAll}"/>
                                #{messages['net.ihe.gazelle.evs.VisibleToAll']}
                                <h:outputText value="#{messages['net.ihe.gazelle.evs.IfThisOptionIsSetTotrueEvenAnonymousUsersWillBeA']}"
                                    styleClass="help-block"/>
                            </s:decorate>

                            <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
                                <ui:param name="id" value="standardId"/>
                                <ui:define name="label">#{messages['net.ihe.gazelle.EVSClient-ui.SelectMenuEntries']}</ui:define>

                                <rich:pickList id="standardId" value="#{menuGroupManager.selectedMenuGroup.standards}" >
                                    <s:selectItems value="#{menuGroupManager.standards}" var="std" label="#{std.label}"/>
                                </rich:pickList>
                            </s:decorate>
                        </s:div>

                        <ui:define name="panel_footer">

                            <a4j:commandButton value="#{messages['gazelle.evs.Save']}"
                                               actionListener="#{menuGroupManager.saveSelectedMenuGroup()}"
                                               styleClass="gzl-btn-blue" render="listForm, editionForm, menuToolBar"/>
                            <a4j:commandButton value="#{messages['net.ihe.gazelle.evs.Cancel']}"
                                               actionListener="#{menuGroupManager.listMenuGroups()}" styleClass="gzl-btn"
                                               render="listForm, editionForm" execute="editMenuConfTokenId"/>
                        </ui:define>
                    </ui:decorate>
                </s:div>
            </h:form>


            <h:form id="delete_menu_form">
                <ui:decorate template="/layout/popup/_popup_title_footer.xhtml">
                    <ui:param name="popup_id" value="delete_menu"/>
                    <ui:define name="popup_title">
                        <h:outputText value="#{messages['gazelle.evs.client.DeleteMenuGroup']}"/>
                    </ui:define>
                    <h:outputText value="#{messages['net.ihe.gazelle.EVSClient-ui.AreYouSureYouWantToDeleteThisMenu']} "/>
                    <h:outputText value="#{menuGroupManager.getSelectedMenuGroup().getLabel()}"/>
                    <ui:define name="popup_footer">
                        <a4j:commandButton styleClass="gzl-btn"
                                           value="#{messages['net.ihe.gazelle.uploader.cancelCaption']}"
                                           oncomplete="jq162('#delete_menu').modal('hide');"
                                           execute="@this"/>
                        <a4j:commandButton value="#{messages['gazelle.evs.client.Confirm']}"
                                           actionListener="#{menuGroupManager.deleteSelectedMenuGroup()}"
                                           onclick="jq162('#delete_menu').modal('hide');"
                                           styleClass="gzl-btn-red"
                                           execute="@this" render="globalDiv" />

                    </ui:define>
                </ui:decorate>
            </h:form>
        </s:div>
    </ui:define>
</ui:composition>