{% load i18n phoxtail_dashboard_tags %}
{# The menu written for this site, along the top of the dashboard. #}
<nav class="dash-menu" aria-label="{% translate 'Menu' %}">
    {% for entry in dashboard_menu.items %}
        {% if entry.block_type == 'dropdown' %}
            {% menu_holds_current_entry entry.value.items as holds_current %}
            <div class="dash-menu__dropdown">
                <button type="button"
                        class="dash-menu__entry dash-menu__dropdown-trigger{% if holds_current %} dash-menu__entry--current{% endif %}"
                        aria-haspopup="true"
                        aria-expanded="false">
                    {{ entry.value.label }}
                    <span class="dash-menu__chevron">{% include 'phoxtail_core/svgs/chevron_down.html' %}</span>
                </button>
                {% if entry.value.items %}
                    {# Covers the gap under the trigger so the pointer can reach the panel. #}
                    <div class="dash-menu__dropdown-bridge"></div>
                    <div class="dash-menu__dropdown-panel">
                        {% for item in entry.value.items %}
                            {% if item.block_type == 'separator' %}
                                <div class="dash-menu__separator" role="separator">
                                    {% if item.value.label %}<span class="dash-menu__separator-label">{{ item.value.label }}</span>{% endif %}
                                </div>
                            {% else %}
                                {% menu_entry item as link %}
                                {% if link %}
                                    {% include 'phoxtail_dashboard/navigation/menu_link.html' with link=link link_class='dash-menu__dropdown-entry' current_class='dash-menu__dropdown-entry--current' %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% elif entry.block_type == 'separator' %}
            <div class="dash-menu__separator" role="separator">
                {% if entry.value.label %}<span class="dash-menu__separator-label">{{ entry.value.label }}</span>{% endif %}
            </div>
        {% else %}
            {% menu_entry entry as link %}
            {% if link %}
                {% include 'phoxtail_dashboard/navigation/menu_link.html' with link=link link_class='dash-menu__entry' current_class='dash-menu__entry--current' %}
            {% endif %}
        {% endif %}
    {% endfor %}
</nav>