<?xml version="1.0" encoding="UTF-8"?>

<ui:composition template="/WEB-INF/templates/layout.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui" xmlns:e="http://www.ivu.de/elect/tags"
                xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

    <!--@elvariable id="msgs" type="de.ivu.elect.business.lokalisierung.control.LokalisierungResourceBundle"-->

    <ui:param name="pageTitle" value="#{not empty pageTitle ? pageTitle : msgs['app.name.full']}" />

    <ui:param name="treeEnabled" value="#{pageMenuDisabled ne true}" />

    <ui:define name="page">
        <ui:include src="/WEB-INF/templates/session-timeout.xhtml" />

        <c:if test="#{ctnPageMenuRendered ne false}">
            <h:form>
                <f:attribute name="role" value="presentation" />
                <p:remoteCommand name="pageMenuWidth" actionListener="#{pageMenuRemoteCommand.setWidth}"  />
                <p:remoteCommand name="pageMenuCollapse" actionListener="#{pageMenuRemoteCommand.collapse}"  />
            </h:form>
            <nav id="ctnPageMenu" class="page-nav-secondary js-page-nav-secondary #{pageMenuState.collapsedClass}" style="#{pageMenuState.style}" aria-label="#{msgs['page.layout.page.menu.label']}">
                <button class="js-page-nav-secondary__toggler ui-button-icon-only" data-button-text-collapse="#{msgs['page.layout.page.menu.toggler.hide']}" data-button-text-expand="#{msgs['page.layout.page.menu.toggler.show']}" aria-controls="ctnPageMenu" aria-expanded="#{pageMenuState.collapsed ? 'false' : 'true'}">
                    <i class="#{icons.iconCollapseLeft} fa-fw"></i>
                    <span class="ui-button-text">#{pageMenuState.collapsed ? msgs['page.layout.page.menu.toggler.show'] : msgs['page.layout.page.menu.toggler.hide']}</span>
                </button>
                <ui:insert name="pageMenu">
                    <ui:decorate template="/WEB-INF/templates/gebietsbaum/gebietsbaum.xhtml" />
                </ui:insert>
            </nav>
            <div class="page-nav-secondary-divider js-page-nav-secondary-divider"></div>
        </c:if>

        <p:outputPanel id="#{layoutComponents.ctnPageContentId}" class="page-content" pt:role="main">
            <p:outputPanel name="header">
                <!-- TODO ELECT-3855, ein offenes Problem ist, dass Meldungen die erst beim Auswerten des <ui:insert /> erzeugt werden an
                     dieser Stelle nie bzw. erst bei einem Refresh der Seite angezeigt werden! -->
                <c:if test="#{outputMessagesHelper.editorOben}">
                    <e:outputMessages id="#{layoutComponents.ctnMessagesId}" inline="true" />
                </c:if>

                <c:if test="#{not empty pageHeader}">
                    <p:outputPanel id="#{layoutComponents.ctnPageContentHeaderId}">
                        <h1>
                            <ui:insert name="pageHeaderGebiet"/>

                            <span><h:outputText value="#{pageHeader}" /></span>
                            <ui:include src="/WEB-INF/templates/online-hilfe.xhtml" />

                            <ui:insert name="pageHeaderInfo"/>

                        </h1>
                    </p:outputPanel>
                </c:if>
            </p:outputPanel>

            <p:outputPanel id="#{layoutComponents.ctnPageContentCenterId}" class="page-content-center js-scrollable-panel">
                <ui:insert />
            </p:outputPanel>
        </p:outputPanel>
    </ui:define>

</ui:composition>
