{% load i18n phoxtail_design_tags %}
<div id="dock-sheet-backdrop" class="dash-dock-sheet-backdrop"></div>
<div id="dock-sheet" class="dash-dock-sheet phx-raised">
    {% for item in dashboard_dock.overflow %}
        {% 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 %}
    {% if dashboard_dock.overflow %}<hr class="dash-nav-separator">{% endif %}
    {% 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>
<nav class="dash-dock phx-raised" data-phoxtail-bar-floor>
    <div class="dash-dock__side dash-dock__side--left">
        {% for item in dashboard_dock.left %}
            {% url item.url_name as item_path %}
            <a href="{{ item_path }}"
               class="dash-dock__item{% if request.path == item_path %} dash-dock__item--active{% endif %}">
                <span class="dash-dock__icon">{% icon item.icon %}</span>
                <span class="dash-dock__label">{{ item.label }}</span>
            </a>
        {% endfor %}
    </div>
    {% url dashboard_dock.center.url_name as center_path %}
    <a href="{{ center_path }}"
       class="dash-dock__item{% if request.path == center_path %} dash-dock__item--active{% endif %}">
        <span class="dash-dock__icon">{% icon dashboard_dock.center.icon %}</span>
        <span class="dash-dock__label">{{ dashboard_dock.center.label }}</span>
    </a>
    <div class="dash-dock__side dash-dock__side--right">
        {% for item in dashboard_dock.right %}
            {% url item.url_name as item_path %}
            <a href="{{ item_path }}"
               class="dash-dock__item{% if request.path == item_path %} dash-dock__item--active{% endif %}">
                <span class="dash-dock__icon">{% icon item.icon %}</span>
                <span class="dash-dock__label">{{ item.label }}</span>
            </a>
        {% endfor %}
        <button id="dock-more-btn"
                type="button"
                class="dash-dock__item dash-dock__more-btn"
                aria-label="{% translate 'More navigation items' %}"
                aria-expanded="false">
            <span class="dash-dock__icon">{% icon "more_horiz" %}</span>
            <span class="dash-dock__label">{% translate 'More' context 'navigation' %}</span>
        </button>
    </div>
</nav>
<script>
    (function () {
        const moreBtn = document.getElementById('dock-more-btn');
        const sheet = document.getElementById('dock-sheet');
        const backdrop = document.getElementById('dock-sheet-backdrop');
        const dock = document.querySelector('.dash-dock');

        // The sheet and its backdrop stop exactly at the dock's top edge.
        // Measured rather than hardcoded so they stay flush if the dock's
        // height changes (labels, safe-area insets, a taller item).
        // A zero height means the dock is display:none (>=1280px), not that
        // it collapsed — writing that would define the var as 0 and defeat
        // the CSS fallback, so keep the last real measurement instead.
        if (dock) {
            new ResizeObserver(function (entries) {
                var height = entries[0].target.offsetHeight;
                if (!height) return;
                document.documentElement.style.setProperty(
                    '--dash-dock-height', height + 'px'
                );
            }).observe(dock);
        }

        // The sheet owns the bottom of the screen while open, so the
        // phoxtail bar (if present) steps aside for it.
        function setSheetOpen(open) {
            sheet.classList.toggle('dash-dock-sheet--open', open);
            backdrop.classList.toggle('dash-dock-sheet-backdrop--open', open);
            moreBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
            document.documentElement.classList.toggle('phoxtail-bar-yield', open);
        }

        function openSheet() {
            setSheetOpen(true);
        }

        function closeSheet() {
            setSheetOpen(false);
        }

        moreBtn.addEventListener('click', function () {
            if (sheet.classList.contains('dash-dock-sheet--open')) {
                closeSheet();
            } else {
                openSheet();
            }
        });

        backdrop.addEventListener('click', closeSheet);

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') closeSheet();
        });
    })();
</script>