{% load i18n static wagtailimages_tags wagtailsettings_tags phoxtail_design_tags %}
{% get_settings %}
<!-- Top Bar -->
<nav class="dash-topbar phx-raised">
    <div class="dash-topbar__inner">
        <div class="dash-topbar__row">
            <div class="dash-topbar__logo">
                {% if settings.phoxtail_cms.SiteSetting.logo %}
                    {% image settings.phoxtail_cms.SiteSetting.logo height-256 as topbar_logo %}
                    <a href="/" class="dash-topbar__logo-link">
                        <picture>
                            {% if settings.phoxtail_cms.SiteSetting.logo_dark %}
                                {% image settings.phoxtail_cms.SiteSetting.logo_dark height-256 as topbar_logo_dark %}
                                <source srcset="{{ topbar_logo_dark.url }}"
                                        media="(prefers-color-scheme: dark)">
                            {% endif %}
                            <img src="{{ topbar_logo.url }}"
                                 alt="{{ settings.phoxtail_cms.SiteSetting.logo.title }}"
                                 class="dash-topbar__logo-img" />
                        </picture>
                    </a>
                {% else %}
                    <a href="/" class="dash-topbar__logo-link">
                        <picture>
                            <source srcset="{% static 'phoxtail_core/phoxtail/logo/wordmark-on-dark.svg' %}" media="(prefers-color-scheme: dark)">
                            <img src="{% static 'phoxtail_core/phoxtail/logo/wordmark-on-light.svg' %}"
                                 alt="Phoxtail"
                                 class="dash-topbar__logo-img" />
                        </picture>
                    </a>
                {% endif %}
            </div>
            <div class="dash-topbar__slot">
                {% include 'phoxtail_dashboard/navigation/language.html' %}
            </div>
            <div class="dash-topbar__actions">
                <button id="menu-btn"
                        class="dash-dock__item dash-dock__more-btn"
                        aria-label="{% translate 'Open menu' %}"
                        type="button">
                    <span class="dash-dock__icon">{% icon "menu" %}</span>
                    <span class="dash-dock__label">{% translate 'Menu' %}</span>
                </button>
            </div>
        </div>
    </div>
</nav>
<!-- Mobile Off-Canvas Drawer -->
<div id="drawer-backdrop" class="dash-mobile-backdrop"></div>
<div id="drawer"
     class="dash-mobile-sidebar phx-ground"
     role="dialog"
     aria-modal="true"
     aria-label="{% translate 'Menu' %}">
    <div class="phoxtail-drawer__header">
        <div class="phoxtail-drawer__title-row">
            {% if settings.phoxtail_cms.SiteSetting.logo %}
                {% image settings.phoxtail_cms.SiteSetting.logo height-256 as drawer_logo %}
                <a href="/" class="dash-mobile-sidebar__logo-link">
                    <picture>
                        {% if settings.phoxtail_cms.SiteSetting.logo_dark %}
                            {% image settings.phoxtail_cms.SiteSetting.logo_dark height-256 as drawer_logo_dark %}
                            <source srcset="{{ drawer_logo_dark.url }}"
                                    media="(prefers-color-scheme: dark)">
                        {% endif %}
                        <img src="{{ drawer_logo.url }}"
                             alt="{{ settings.phoxtail_cms.SiteSetting.logo.title }}"
                             class="dash-mobile-sidebar__logo-img" />
                    </picture>
                </a>
            {% else %}
                <a href="/" class="dash-mobile-sidebar__logo-link">
                    <picture>
                        <source srcset="{% static 'phoxtail_core/phoxtail/logo/wordmark-on-dark.svg' %}" media="(prefers-color-scheme: dark)">
                        <img src="{% static 'phoxtail_core/phoxtail/logo/wordmark-on-light.svg' %}"
                             alt="Phoxtail"
                             class="dash-mobile-sidebar__logo-img" />
                    </picture>
                </a>
            {% endif %}
            <button id="close-drawer"
                    class="phoxtail-close-btn"
                    aria-label="{% translate 'Close menu' %}"
                    type="button">
                {% icon "close" %}
            </button>
        </div>
    </div>
    <nav class="dash-mobile-sidebar__nav">
        {% if user.is_authenticated %}
            <div class="dash-mobile-sidebar__links">
                {% url 'dashboard:index' as dashboard_path %}
                <a href="{{ dashboard_path }}"
                   class="dash-nav-item{% if request.path == dashboard_path %} dash-nav-item--active{% endif %}">
                    <span class="dash-nav-icon">{% icon "dashboard" %}</span>
                    <span class="dash-nav-label">{% translate 'Dashboard' %}</span>
                </a>
                {% for item in dashboard_nav_items %}
                    {% url item.url_name as item_path %}
                    <a href="{{ item_path }}"
                       class="dash-nav-item{% if request.path == item_path %} dash-nav-item--active{% endif %}">
                        <span class="dash-nav-icon">{% icon item.icon %}</span>
                        <span class="dash-nav-label">{{ item.label }}</span>
                    </a>
                {% endfor %}
            </div>
            {% include 'phoxtail_dashboard/navigation/menu_drawer.html' %}
            <div class="dash-mobile-sidebar__footer-links">
                {% url 'users:profile' as profile_path %}
                <a href="{{ profile_path }}"
                   class="dash-nav-item{% if request.path == profile_path %} dash-nav-item--active{% endif %}">
                    <span class="dash-nav-icon">{% icon "person" %}</span>
                    <span class="dash-nav-label">{% translate 'Profile' %}</span>
                </a>
                {% url 'wagtailadmin_home' as admin_path %}
                {% if perms.wagtailadmin.access_admin %}
                    <a href="{{ admin_path }}"
                       class="dash-nav-item{% if request.path == admin_path %} dash-nav-item--active{% endif %}">
                        <span class="dash-nav-icon">{% icon "settings" %}</span>
                        <span class="dash-nav-label">{% translate 'Admin' context 'admin area' %}</span>
                    </a>
                {% endif %}
                <form method="post" action="{% url 'account_logout' %}">
                    {% csrf_token %}
                    <button type="submit" class="dash-nav-item dash-nav-signout">
                        <span class="dash-nav-icon">{% icon "signout" %}</span>
                        <span class="dash-nav-label">{% translate 'Sign out' %}</span>
                    </button>
                </form>
            </div>
        {% endif %}
        {% if not user.is_authenticated %}
            <div class="dash-mobile-sidebar__auth">
                <a href="{% url 'account_login' %}"
                   class="phx-button phx-button--secondary">
                    {% icon "signin" %}
                    {% translate 'Log in' %}
                </a>
                <a href="{% url 'account_signup' %}"
                   class="phx-button phx-button--primary">
                    {% icon "person_add" %}
                    {% translate 'Sign up' %}
                </a>
            </div>
        {% endif %}
    </nav>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var topbar = document.querySelector('.dash-topbar');
        var menuBtn = document.getElementById('menu-btn');
        var sidebar = document.getElementById('drawer');
        var backdrop = document.getElementById('drawer-backdrop');
        var closeBtn = document.getElementById('close-drawer');

    /* Hide the topbar when scrolling down past a threshold; reveal it again
       on any upward scroll (or near the top). Scroll happens inside
       .dash-content, not window. */
        var scrollContainer = document.querySelector('.dash-content');
        var lastScrollY = scrollContainer ? scrollContainer.scrollTop : 0;
        var ticking = false;

        function updateTopbar() {
            var currentScrollY = scrollContainer.scrollTop;

            if (currentScrollY > lastScrollY && currentScrollY > 100) {
                topbar.classList.add('dash-topbar--hidden');
            } else if (currentScrollY < lastScrollY || currentScrollY <= 100) {
                topbar.classList.remove('dash-topbar--hidden');
            }

            lastScrollY = currentScrollY;
            ticking = false;
        }

        if (scrollContainer && topbar) {
            scrollContainer.addEventListener('scroll', function () {
                if (!ticking) {
                    window.requestAnimationFrame(updateTopbar);
                    ticking = true;
                }
            }, { passive: true });
        }

    /* Sidebar open/close */
        function openSidebar() {
            if (backdrop) backdrop.classList.add('nb-open');
            sidebar.classList.add('nb-open');
        }

        function closeSidebar() {
            if (backdrop) backdrop.classList.remove('nb-open');
            sidebar.classList.remove('nb-open');
        }

    /* Platform menu accordions */
        document.querySelectorAll('.dash-menu-drawer__trigger').forEach(function (trigger) {
            var panel = trigger.nextElementSibling;
            var chevron = trigger.querySelector('.dash-menu-drawer__chevron');
            if (!panel) return;

            trigger.addEventListener('click', function () {
                var expanded = panel.classList.contains('dash-menu-drawer__panel--expanded');

                if (expanded) {
                    panel.style.maxHeight = panel.scrollHeight + 'px';
                    panel.offsetHeight;
                    panel.style.maxHeight = '0px';
                    setTimeout(function () {
                        panel.classList.remove('dash-menu-drawer__panel--expanded');
                        panel.style.maxHeight = '';
                    }, 300);
                } else {
                    panel.style.maxHeight = '0px';
                    panel.offsetHeight;
                    panel.style.maxHeight = panel.scrollHeight + 'px';
                    setTimeout(function () {
                        panel.classList.add('dash-menu-drawer__panel--expanded');
                        panel.style.maxHeight = '';
                    }, 300);
                }

                trigger.setAttribute('aria-expanded', expanded ? 'false' : 'true');
                if (chevron) chevron.classList.toggle('dash-menu-drawer__chevron--rotated', !expanded);
            });
        });

        if (menuBtn) menuBtn.addEventListener('click', openSidebar);
        if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
        if (backdrop) backdrop.addEventListener('click', closeSidebar);

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && sidebar.classList.contains('nb-open')) {
                closeSidebar();
            }
        });
    });
</script>