{% load i18n static wagtailimages_tags wagtailsettings_tags phoxtail_design_tags %}
<div class="dash-sidebar-wrapper">
    <div class="dash-sidebar-spacer" id="dash-sidebar-spacer">
        <div class="dash-sidebar phx-card phx-card--flush" id="dash-sidebar">
            <!-- Logo -->
            <div class="dash-sidebar__logo">
                {% get_settings %}
                {% if settings.phoxtail_cms.SiteSetting.logo %}
                    {% image settings.phoxtail_cms.SiteSetting.logo height-256 as logo %}
                    <a href="/" class="dash-sidebar__logo-link">
                        <picture>
                            {% if settings.phoxtail_cms.SiteSetting.logo_dark %}
                                {% image settings.phoxtail_cms.SiteSetting.logo_dark height-256 as logo_dark %}
                                <source srcset="{{ logo_dark.url }}" media="(prefers-color-scheme: dark)">
                            {% endif %}
                            <img src="{{ logo.url }}"
                                 alt="{{ settings.phoxtail_cms.SiteSetting.logo.title }}"
                                 class="dash-sidebar__logo-img" />
                        </picture>
                    </a>
                {% else %}
                    <a href="/" class="dash-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-sidebar__logo-img" />
                        </picture>
                    </a>
                {% endif %}
            </div>
            <!-- Navigation -->
            <div class="dash-sidebar__nav">
                <nav class="dash-sidebar__nav-list">
                    {% 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 %}
                    {% include 'phoxtail_dashboard/navigation/website_flyout.html' %}
                </nav>
            </div>
            <!-- Footer Controls -->
            <div class="dash-sidebar__footer">
                <button type="button"
                        class="dash-nav-item dash-sidebar__collapse-btn"
                        id="sidebar-collapse-btn"
                        aria-label="{% translate 'Toggle sidebar' %}">
                    <span class="dash-nav-icon dash-sidebar__collapse-icon">{% icon "menu" %}</span>
                    <span class="dash-nav-label" id="sidebar-collapse-label">{% translate 'Collapse menu' %}</span>
                </button>
                {% include 'phoxtail_dashboard/navigation/language_flyout.html' %}
                {% 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>
        </div>
    </div>
</div>
<script>
    (function () {
        const sidebar = document.getElementById('dash-sidebar');
        const spacer = document.getElementById('dash-sidebar-spacer');
        const btn = document.getElementById('sidebar-collapse-btn');
        const label = document.getElementById('sidebar-collapse-label');
        const KEY = 'dash-sidebar-collapsed';

        const setCollapsed = (collapsed, animate = true) => {
            if (!animate) {
                sidebar.style.transition = 'none';
                spacer.style.transition = 'none';
            }

            sidebar.classList.toggle('dash-sidebar--collapsed', collapsed);
            spacer.classList.toggle('dash-sidebar-spacer--collapsed', collapsed);

            if (label) {
                label.textContent = collapsed
                    ? '{% translate "Expand menu" as expand_label %}{{ expand_label|escapejs }}'
                    : '{% translate "Collapse menu" as collapse_label %}{{ collapse_label|escapejs }}';
            }

            if (!animate) {
            // Force reflow to ensure the 'none' transition is applied before we restore it
                sidebar.offsetHeight;
                sidebar.style.transition = '';
                spacer.style.transition = '';
            }
        };

    // A flyout opens beside the sidebar card, level with its row, and stays
    // inside the window. A click opens it and keeps it open; with a mouse,
    // hovering opens it too, and it closes a moment after the pointer has
    // left both the row and the card (long enough to cross the gap).
        const canHover = window.matchMedia('(hover: hover)').matches;
        sidebar.querySelectorAll('.dash-flyout').forEach((flyout) => {
            const row = sidebar.querySelector(`[popovertarget="${flyout.id}"]`);
            let closeTimer = null;
            let openedByHover = false;

            const place = () => {
                const top = row.getBoundingClientRect().top;
                const limit = window.innerHeight - flyout.offsetHeight - 12;
                flyout.style.left = `${sidebar.getBoundingClientRect().right + 8}px`;
                flyout.style.top = `${Math.max(12, Math.min(top, limit))}px`;
            };
            // Placed once before it shows (its height is not known yet) and
            // again before its first paint, once it is.
            flyout.addEventListener('beforetoggle', (e) => {
                if (e.newState !== 'open') return;
                place();
                requestAnimationFrame(place);
            });
            flyout.addEventListener('toggle', (e) => {
                if (e.newState !== 'open') openedByHover = false;
            });

            // A click on a row the pointer has just opened keeps it open.
            row.addEventListener('click', (e) => {
                if (openedByHover && flyout.matches(':popover-open')) e.preventDefault();
                openedByHover = false;
            });

            if (!canHover) return;
            const stay = () => clearTimeout(closeTimer);
            const leave = () => {
                stay();
                closeTimer = setTimeout(() => {
                    if (openedByHover) flyout.hidePopover();
                }, 250);
            };
            row.addEventListener('mouseenter', () => {
                stay();
                if (!flyout.matches(':popover-open')) {
                    flyout.showPopover();
                    openedByHover = true;
                }
            });
            row.addEventListener('mouseleave', leave);
            flyout.addEventListener('mouseenter', stay);
            flyout.addEventListener('mouseleave', leave);
        });

    // Apply state immediately from localStorage
        const isCollapsed = localStorage.getItem(KEY) === '1';
        setCollapsed(isCollapsed, false);

        btn.addEventListener('click', () => {
            const nowCollapsed = !sidebar.classList.contains('dash-sidebar--collapsed');

        // Prevent immediate tooltip pop-up on click when collapsing
            if (nowCollapsed) {
                btn.classList.add('dash-nav-item--no-tooltip');
            }

            setCollapsed(nowCollapsed, true);
            localStorage.setItem(KEY, nowCollapsed ? '1' : '0');

        // Remove the no-tooltip class once the mouse leaves the button
            const onMouseLeave = () => {
                btn.classList.remove('dash-nav-item--no-tooltip');
                btn.removeEventListener('mouseleave', onMouseLeave);
            };
            btn.addEventListener('mouseleave', onMouseLeave);
        });
    })();
</script>