<!DOCTYPE html>
<html lang="{{ LANG }}">
<head>
    <title>
        Obscreen - {% block page_title %}{% endblock %}
    </title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="google" content="notranslate">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="{{ STATIC_PREFIX }}favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="{{ STATIC_PREFIX }}favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="{{ STATIC_PREFIX }}favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_PREFIX }}favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="{{ STATIC_PREFIX }}favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_PREFIX }}favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="{{ STATIC_PREFIX }}favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_PREFIX }}favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_PREFIX }}favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="{{ STATIC_PREFIX }}favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_PREFIX }}favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="{{ STATIC_PREFIX }}favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_PREFIX }}favicon/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#692fbd">
    <meta name="msapplication-TileImage" content="{{ STATIC_PREFIX }}favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#692fbd">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/main.css" />
    {% block add_css %}{% endblock %}
    {{ HOOK(H_ROOT_CSS) }}
</head>
<body>
<div class="container {% block container_class %}{% endblock %}">
    {% set fleet_mode = request.args.get('fleet_mode') == '1' %}

    {% block header %}
        {% if not fleet_mode %}
             <header>
                <h1 class="logo">
                    <a href="{{ url_for('slideshow_slide_list') }}">
                        <img src="{{ STATIC_PREFIX }}img/logo.png" />
                        Obscreen
                    </a>
                </h1>

                {% if not AUTH_ENABLED or (current_user and current_user.is_authenticated) %}
                <nav>
                    <ul>
                        {{ HOOK(H_ROOT_NAV_ELEMENT_START) }}
                        <li class="{{ 'active' if request.url_rule.endpoint == 'slideshow_slide_list' }}">
                            <a href="{{ url_for('slideshow_slide_list') }}">
                                <i class="fa-regular fa-clock"></i> {{ l.slideshow_page_title }}
                            </a>
                        </li>
                        {% if PLAYLIST_ENABLED %}
                        <li class="{{ 'active' if request.url_rule.endpoint == 'playlist_list' }}">
                            <a href="{{ url_for('playlist_list') }}">
                                <i class="fa fa-bars-staggered"></i> {{ l.playlist_page_title }}
                            </a>
                        </li>
                        {% endif %}
                        {% if FLEET_STUDIO_ENABLED %}
                        <li class="{{ 'active' if request.url_rule.endpoint == 'fleet_studio_list' }}">
                            <a href="{{ url_for('fleet_studio_list') }}">
                                <i class="fa fa-server"></i> {{ l.fleet_page_title }}
                            </a>
                        </li>
                        {% endif %}
                        {% if AUTH_ENABLED %}
                        <li class="{{ 'active' if request.url_rule.endpoint == 'auth_user_list' }}">
                            <a href="{{ url_for('auth_user_list') }}">
                                <i class="fa fa-user"></i> {{ l.auth_page_title }}
                            </a>
                        </li>
                        {% endif %}
                        <li class="{{ 'active' if request.url_rule.endpoint == 'settings_variable_list' }}">
                            <a href="{{ url_for('settings_variable_list') }}">
                                <i class="fa-solid fa-cogs"></i> {{ l.settings_page_title }}
                            </a>
                        </li>
                        <li class="{{ 'active' if request.url_rule.endpoint == 'sysinfo_attribute_list' }}">
                            <a href="{{ url_for('sysinfo_attribute_list') }}">
                                <i class="fa-solid fa-list-check"></i> {{ l.sysinfo_page_title }}
                            </a>
                        </li>
                        {% if AUTH_ENABLED %}
                        <li class="user-menu">
                            <div class="username">
                                <i class="fa fa-user"></i>
                                {{ current_user.username }}
                            </div>
                            <a href="{{ url_for('logout') }}" title="{{ l.logout }}" class="logout">
                                <i class="fa fa-right-from-bracket"></i>
                            </a>
                        </li>
                        {% endif %}
                        {{ HOOK(H_ROOT_NAV_ELEMENT_END) }}
                    </ul>
                </nav>
                {% endif %}
            </header>
        {% endif %}
    {% endblock %}

    {% block page %}

    {% endblock %}


    {% block footer %}
        <footer>
            {{ HOOK(H_ROOT_FOOTER) }}

            <p class="version">Obscreen version {{ VERSION }}</p>
        </footer>
    {% endblock %}
</div>
<script>
    var secret_key = '{{ SECRET_KEY }}';
    var l = {
        'js_common_are_you_sure': '{{ l.common_are_you_sure }}',
        'js_playlist_delete_confirmation': '{{ l.js_playlist_delete_confirmation }}',
        'js_slideshow_slide_delete_confirmation': '{{ l.js_slideshow_slide_delete_confirmation }}',
        'js_fleet_studio_delete_confirmation': '{{ l.js_fleet_studio_delete_confirmation }}',
        'js_auth_user_delete_confirmation': '{{ l.js_auth_user_delete_confirmation }}',
        'js_sysinfo_restart_confirmation': '{{ l.js_sysinfo_restart_confirmation }}',
        'js_sysinfo_restart_loading': '{{ l.js_sysinfo_restart_loading }}'
    };
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="{{ STATIC_PREFIX }}js/global.js"></script>
{{ HOOK(H_ROOT_JAVASCRIPT) }}
{% block add_js %}{% endblock %}
</body>
</html>
