{#
/**
 * Copyright (C) 2020-2025 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - https://xibosignage.com
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends "base.twig" %}

{% block headContent %}
                <script nonce="{{ cspNonce }}">
                (function(){
                        try{
                                var stored = localStorage.getItem('ots-theme-mode');
                                var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
                                var mode = stored || (prefersLight ? 'light' : 'dark');
                                if(mode === 'light') document.documentElement.classList.add('ots-light-mode');
                                else document.documentElement.classList.remove('ots-light-mode');
                        }catch(e){}
                })();

                (function(){
                    // Apply collapsed sidebar state early to prevent header flashing
                    try {
                        var collapsed = localStorage.getItem('otsTheme:sidebarCollapsed');
                        if (collapsed === 'true') {
                            document.documentElement.classList.add('ots-sidebar-collapsed');
                            if (document.body) document.body.classList.add('ots-sidebar-collapsed');
                        }
                    } catch (e) {}
                })();

                </script>
                <style nonce="{{ cspNonce }}">
                /* Let the CSS variable theming (light/dark) control page background */
                html,body{background-color:var(--color-background,#0f172a)!important;color:var(--color-text-primary,#ffffff)!important}
                /* Hide the old topbar strip entirely — actions are now in .ots-page-actions */
                .row.header.header-side,
                .ots-topbar-strip { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
                </style>
{% endblock %}

{% block content %}
    {% set horizontalNav = currentUser.getOptionValue("navigationMenuPosition", theme.getSetting("NAVIGATION_MENU_POSITION", "vertical")) == "horizontal" %}

    {% if not hideNavigation %}
        {% set hideNavigation = currentUser.getOptionValue("hideNavigation", "0") %}
    {% endif %}

    <div {% if hideNavigation == "0" and not horizontalNav and not forceHide %}id="page-wrapper"{% endif %} class="active">

        {% if hideNavigation == "0" and not forceHide %}
            {% if horizontalNav %}
                <nav class="navbar navbar-default navbar-expand-lg">
                    <a class="navbar-brand xibo-logo-container" href="#">
                        <img class="xibo-logo" src="{{ theme.uri("img/xibologo.png") }}">
                        <span class="xibo-logo-text">
                            <span class="brand-line brand-line-top">OTS</span>
                            <span class="brand-line brand-line-bottom">Signs</span>
                        </span>
                    </a>

                    <!-- Brand and toggle get grouped for better mobile display -->
                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse-1" aria-controls="navbarNav" aria-expanded="false">
                        <span class="fa fa-bars"></span>
                    </button>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="navbar-collapse collapse justify-content-between" id="navbar-collapse-1">
                        {% include "authed-topbar.twig" %}

                        <ul class="nav navbar-nav navbar-right">
                            {% include "authed-theme-topbar.twig" ignore missing %}
                            {% if currentUser.featureEnabled("drawer") %}
                                {% include "authed-notification-drawer.twig" %}
                            {% endif %}
                            {% include "authed-user-menu.twig" %}
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </nav>
            {% else %}
                <div class="navbar-collapse navbar-collapse-side collapse" id="navbar-collapse-1">
                    {% include "authed-sidebar.twig" %}
                </div>
            {% endif %}
        {% endif %}

        <div id="content-wrapper" class="{% if hideNavigation == "1" %}no-nav{% endif %}{% if horizontalNav %} ots-horizontal-nav{% endif %}">
            {# Floating top-right actions: notification bell + user menu #}
            {# Hidden when horizontal nav is active — the navbar already has these controls #}
            {% if not forceHide and not horizontalNav %}
            <div class="ots-page-actions"{% if hideNavigation == "1" %} style="display:none!important"{% endif %}>
                {% include "authed-theme-topbar.twig" ignore missing %}
                {% if currentUser.featureEnabled("drawer") %}
                    <div class="ots-topbar-action">
                        {% include "authed-notification-drawer.twig" with { 'compact': true } %}
                    </div>
                {% endif %}
                <div class="ots-topbar-action">
                    {% include "authed-user-menu.twig" with { 'compact': true } %}
                </div>
            </div>
            {% endif %}
            <div class="page-content">
                <div class="row">
                    <div class="col-sm-12">
                        {% block actionMenu %}{% endblock %}

                        {% if settings.INSTANCE_SUSPENDED == "partial" %}
                            <div class="alert alert-warning">{{ "CMS suspended. Displays will show cached content. Please contact your administrator."|trans }}</div>
                        {% endif %}

                        {% block pageContent %}{% endblock %}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        {% block pageFooter %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% set helpLinks = helpService.getLinksForPage(route) %}
    {% set faultViewEnabled = currentUser.featureEnabled("fault.view") %}

    {# Hide in mobile view (sm/<768px)  #}
    <div id="help-pane" class="d-none d-md-flex help-pane"
        data-help-links="{{ helpLinks|json_encode }}"
        data-url-help-landing-page={{ helpService.getLandingPage() }}
        data-fault-view-enabled={{faultViewEnabled}}
        data-fault-view-url={{ url_for("fault.view") }}
    >
        <div class="help-pane-container" style="display: none;">
        </div>
        <div class="help-pane-btn">
            <i class="fas fa-question"></i>
        </div>
    </div>
{% endblock %}

{% block javaScriptTemplates %}
    {# File upload templates and scripts #}
    {% include "include-file-upload.twig" %}
{% endblock %}