<!DOCTYPE html>

<html lang="#{userLocale.language}" dir="#{userLocale.getTextDirection()}"
        xmlns="http://www.w3.org/1999/xhtml" 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:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:jsf="http://xmlns.jcp.org/jsf" class="#{layoutComponentsContext.extraHtmlStyleClass}">
<!--@elvariable id="msgs" type="de.ivu.elect.business.lokalisierung.control.LokalisierungResourceBundle"-->
<f:view encoding="UTF-8" locale="#{userLocale.locale}">
    <h:head>
        <f:facet name="first">
            <meta charset="UTF-8" />

            <!-- Cf. ELECT-1471 (Internet Explorer: Kompatibilitätsmodus deaktivieren) -->
            <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

            <!-- ELECT-7720 -->
            <c:if test="#{layoutComponentsContext.farbeImTabVerwenden}">
              <meta name="theme-color" content="##{layoutComponentsContext.farbe}"/>
              <link rel="shortcut icon" href="#{request.contextPath}/favicon?#{layoutComponentsContext.farbe}" />
            </c:if>
            <c:if test="#{not layoutComponentsContext.farbeImTabVerwenden}">
              <c:if test="#{empty resource['images:app-favicon-custom.ico']}">
                <link rel="shortcut icon" href="#{resource['images:app-favicon-32x32.ico']}" />
              </c:if>
              <c:if test="#{not empty resource['images:app-favicon-custom.ico']}">
                <link rel="shortcut icon" href="#{resource['images:app-favicon-custom.ico']}" />
              </c:if>
            </c:if>
            <!-- Cf. http://www.w3.org/TR/xhtml-modularization/abstraction.html#dt_LinkTypes -->
            <link rel="first" href="#{request.contextPath}/#{startViewResolver.startViewId}" />

            <!-- TODO link rel="help" href="#{request.contextPath}#{helpNavigation.helpIndex()}" /-->
            <!-- TODO link rel="copyright license" href="#{request.contextPath}/license" title="license information" /-->

            <link rel="author" href="#{msgs['page.meta.author.url']}" />

            <title><h:outputText value="#{interpolator.interpolate('page.meta.title', msgs['app.name'], layoutComponentsContext.subTitle,pageTitle)}" /></title>
        </f:facet>

        <f:facet name="last">
            <!-- TODO bootstrap.css nach elect-base.min.css bzw. elect-theme.min.css migrieren. -->
            <h:outputStylesheet library="css" name="bootstrap.css" />

            <h:outputStylesheet library="css" name="elect-base.min.css" />
            <h:outputStylesheet library="css" name="elect-theme.min.css" />

            <!-- NOTE that PrimeFaces suppresses inline h:outputStylesheet, cf. http://forum.primefaces.org/viewtopic.php?f=3&t=22448 -->
            <ui:insert name="pageStyle" />
            <ui:insert name="presentationStyle" />

            <!-- ELECT-6891 Bibliotheken manuell laden, wäre durch  ds:windowId implizit geschehen -->
            <h:outputScript library="deltaspike" name="windowhandler.js" target="head"/>
            <h:outputScript library="javax.faces" name="jsf.js" target="head" />

            <h:outputScript library="js" name="elect-base-3rdparty.js" />
            <h:outputScript library="js" name="elect-base.min.js" />
            <h:outputScript library="js" name="elect-theme.min.js" />

        </f:facet>
    </h:head>

    <!--&lt;!&ndash; ELECTKOM-146 keine Ahnung, ob das überhaupt etwas bringt &ndash;&gt;-->
    <!--<c:if test="#{mandantenNummerUrlParameter.mandantenUnterstuetzt}">-->
        <!--<f:metadata>-->
            <!--<f:viewParam name="mandant" value="#{mandantenNummerUrlParameter.mandantenNummer}"  />-->
        <!--</f:metadata>-->
    <!--</c:if>-->

    <h:body styleClass="#{layoutComponentsContext.extraHtmlStyleClass}">
        <!-- ELECT-6891 statt ds:windowId direkt JavaScript -->
        <script>
            (function(){dswh.init('#{deltaSpikeWindowId.windowId}','LAZY',10,{'tokenizedRedirect':false,'storeWindowTreeOnLinkClick':true,'storeWindowTreeOnButtonClick':false});})();
        </script>
        <a href="##{layoutComponents.ctnPageContentId}" class="ui-skiplink ui-widget ui-state-default">#{msgs['page.layout.skiplink.label']}</a>
        <div class="page-container" jsf:id="THEPAGE">
            <header role="banner" class="page-header" id="ctnHeader" style="background-color:##{not empty layoutComponentsContext.selected ? layoutComponentsContext.farbe : 'ffffff'};">
                <ui:insert name="header">
                    <ui:include src="/WEB-INF/templates/header.xhtml" />
                </ui:insert>
                <c:if test="#{systemMessage.systemMessagePresent}">
                    <div class="ui-widget ui-messages-error width-100-percent nomargin nopadding">
                            <span class="ui-messages-error-detail inline-block" style="padding: 10px; font-size: medium;">
                                <h:outputText value="#{systemMessage.systemMessage}"/>
                            </span>
                    </div>
                </c:if>
            </header>

            <p:outputPanel layout="block" id="#{layoutComponents.ctnContentId}" class="page-main-wrapper">
                <noscript>
                    <div class="ui-messages-error nomargin nopadding">
                        <span class="ui-messages-error-detail inline-block" style="padding: 10px; font-size: medium;">
                            <h:outputFormat escape="false" value="#{msgs['page.message.noscript']}">
                                <f:param value="#{msgs['app.name.short']}" />
                            </h:outputFormat>
                        </span>
                    </div>
                </noscript>

                <ui:insert name="content">
                    <c:if test="#{systemMessage.mandantMessagePresent}">
                        <div class="ui-messages-warn nomargin nopadding">
                            <span class="ui-messages-warn-detail inline-block" style="padding: 10px; font-size: medium;">
                                <h:outputText value="#{systemMessage.mandantMessage}"/>
                            </span>
                        </div>
                    </c:if>

                    <nav class="page-nav-primary" id="ctnMainMenu" role="navigation" aria-label="#{msgs['page.layout.main.menu.label']}">
                        <ui:insert name="mainMenu">
                            <p:outputPanel deferred="false" layout="block">
                                <ui:include src="/WEB-INF/templates/main-menu.xhtml" />
                            </p:outputPanel>
                        </ui:insert>
                    </nav>

                    <p:outputPanel layout="block" styleClass="page-main" id="ctnPage">
                        <ui:insert name="page" />

                        <!-- NOTE, dass diese Position wichtig ist, um ALLE erzeugten FacesMessages anzuzeigen! -->
                        <c:if test="#{outputMessagesHelper.popup}">
                            <e:outputMessages id="#{layoutComponents.ctnMessagesId}" inline="false" />
                        </c:if>
                    </p:outputPanel>

                    <c:if test="#{layoutComponents.experimentalFeatureToggleCalendarSidebar}">
                    <p:sidebar styleClass="sidebar-calendar" widgetVar="sidebar2" position="right" baseZIndex="100" appendTo="ctnPage" rendered="">
                        <p:panel>
                            <f:facet name="header">
                                <e:outputIcon value="#{icons.iconKalender}" title="Nächste Termine" />
                                <h:outputText value="Nächste Termine" />
                            </f:facet>
                            <ui:include src="/WEB-INF/templates/calendar.xhtml" />
                        </p:panel>
                        <!-- TODO: In css-Datei verschieben -->
                        <style>
                            body .ui-growl {
                                z-index: 1500 !important;
                            }
                            .page-main {
                                position: relative;
                            }
                            .ui-sidebar-right {
                                position: absolute;
                                width: 30rem;
                                padding: 0;
                            }
                            .ui-sidebar-close {
                                display: none;
                            }
                            .ui-sidebar .ui-panel {
                                display: flex;
                                flex-direction: column;
                                height: 100%;
                            }
                            .ui-sidebar .ui-panel-content {
                                flex: 1 1 100%;
                                overflow: auto;
                            }
                            .ui-sidebar-mask {
                                opacity: 0.2;
                            }
                        </style>
                    </p:sidebar>
                    </c:if>
                </ui:insert>

                <!--ELECT-1619-->
                <e:blockUI target="#{layoutComponents.ctnContentId}" />
            </p:outputPanel>

            <footer role="contentinfo" class="page-footer" id="ctnFooter">
                <ui:insert name="footer">
                    <p:outputPanel deferred="false" layout="block">
                        <ui:include src="/WEB-INF/templates/footer.xhtml" />
                    </p:outputPanel>

                    <p:ajaxStatus onstart="jQuery('body').addClass('ajaxStatus');" oncomplete="jQuery('body').removeClass('ajaxStatus'); setElectStyles();">
                        <f:facet name="start">
                            <div id="ctnAjaxStatus"></div>
                        </f:facet>
                        <f:facet name="complete">
                          <!-- If a complete facet is defined, the user will never see the error or success facets. -->
                        </f:facet>
                    </p:ajaxStatus>

                    <script>/* <![CDATA[ */
                    window.onmousemove = function (e) {
                        var $ctnAjaxStatus = document.getElementById('ctnAjaxStatus');

                        if ($ctnAjaxStatus) {
                          var x = e.clientX, y = e.clientY;

                          $ctnAjaxStatus.style.top  = (y + 15) + 'px';
                          $ctnAjaxStatus.style.left = (x + 15) + 'px';
                        }
                    };

                    function electstyle2style(elementWithElectStyle) {
                        var styles = elementWithElectStyle.getAttribute('electstyle');
                        styles = styles.replace('null;', '');
                        styles = styles.concat(elementWithElectStyle.style.cssText);
                        if (styles.length > 0) {
                            elementWithElectStyle.style.cssText = styles;
                        }
                        elementWithElectStyle.removeAttribute('electstyle');
                    }

                    function setElectStyles() {
                        $("[electstyle]").each(function() {
                            electstyle2style(this);
                        });
                    }

                    $(document).ready(function () {
                        setTimeout(function(){ setElectStyles(); }, 0);
                    });
                    /* ]]> */</script>
                </ui:insert>
            </footer>
        </div>
    </h:body>
  </f:view>
</html>
