{#
SPDX-FileCopyrightText: 2026 Martin Kirchgessner

SPDX-License-Identifier: AGPL-3.0-or-later
#}

{% from 'macros.jinja' import menu_item %}
<!doctype html>
<html lang="en" class="has-navbar-fixed-top">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}{% endblock %} - Radiotomate</title>
        <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for("static", filename="logo/favicon-32x32.png") }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for("static", filename="logo/favicon-16x16.png") }}">
        <link rel="shortcut icon" href="{{ url_for("static", filename="favicon.ico") }}"/>
        <link href="{{ url_for("static", filename="AtkinsonHyperlegible/AtkinsonHyperlegible.css") }}" rel="stylesheet">
        <link href="{{ url_for("static", filename="radiotomate.css") }}" rel="stylesheet">
        <script defer src="{{ url_for("static", filename="htmx.min.js") }}"></script>
        <script defer src="{{ url_for("static", filename="htmx-sse.js") }}"></script>
        <script defer src="{{ url_for("static", filename="sweetalert2-11.7.31.js") }}"></script>
        <script defer src="{{ url_for("static", filename="alpinejs-3.13.0.min.js") }}"></script>
    </head>
    <body>

        <nav role="navigation"
            class="navbar is-fixed-top"
            x-data="{mobileexpanded: false}"
            >
            <div class="navbar-brand is-large">
                <span class="navbar-item" aria-hidden="true">
                    <img src="{{ url_for("static", filename="logo/favicon-32x32.png") }}">
                    {{ config['INTERFACE_NAME'] }}
                </span>

                <a role="button" aria-label="menu" aria-expanded="false"
                    :class="'navbar-burger' + (mobileexpanded ? ' is-active' : '')"
                    @click="mobileexpanded = !mobileexpanded"
                    >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>

            {# we give class and :class so the element has a class even before alpine.js has started. This avoid a flipping .navbar-end during page load. #}
            <div class="navbar-menu" :class="'navbar-menu' + (mobileexpanded ? '  is-active' : '')">
                <div class="navbar-start">
                    {% if current_user.is_authenticated %}
                        {{ menu_item("home.index", '📻', "Live", in_blueprint('home')) }}
                    {% endif %}
                    {% if current_user.is_authenticated %}
                        {{ menu_item("history.index", '📜', "History", in_blueprint('history')) }}
                    {% endif %}
                    {% if current_user.is_authenticated %}
                        {{ menu_item("carts.index", '📼', "Carts", in_blueprint('carts')) }}
                    {% endif %}
                    {% if current_user.is_authenticated %}
                        {{ menu_item("autodj.index", '🎧', "Auto-DJ", in_blueprint('autodj')) }}
                    {% endif %}
                    {% if current_user.user.can_admin() %}
                        {{ menu_item("users.index", '👤', "Users", in_blueprint('users')) }}
                    {% endif %}
                </div>

                <div class="navbar-end">
                    {% if current_user.is_authenticated %}
                        {{ menu_item("login.log_out", '🚪', "Log out", False) }}
                    {% else %}
                        {{ menu_item("login.log_in", '🔑', "Log in", in_blueprint('login')) }}
                    {% endif %}
                </div>
            </div>

        </nav>

        {% block content %}{% endblock %}

        <footer class="footer">
            <div class="content has-text-right">
                <p>
                    Radiotomate {{ config["RADIOTOMATE_VERSION"] }} -
                    <a href="https://hg.sr.ht/~martink/radiotomate" target="_blank">
                        sources
                    </a>
                </p>
            </div>
        </footer>

        <script defer src="{{ url_for("static", filename="radiotomate.js") }}"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                htmx.config.defaultSwapDelay = {{ transitions_delay_ms }};
            });
        </script>
        {% block scripts %}{% endblock %}
    </body>
</html>
