{% load insight_tags %}

<div class="relative">
    {% if dropdown_config.show_arrow %}
        {% button label=dropdown_config.title icon_name="chevron-down" icon_size="s" icon_end=True data_insight_dropdown=dropdown_config.tag_id aria_expanded="false" aria_haspopup="menu" aria_controls=dropdown_config.tag_id %}
    {% else %}
        {% button label=dropdown_config.title data_insight_dropdown=dropdown_config.tag_id aria_expanded="false" aria_haspopup="menu" aria_controls=dropdown_config.tag_id %}
    {% endif %}
    <div id="{{ dropdown_config.tag_id }}" role="menu" class="hidden border border-insight-surface rounded-insight-overlay shadow-insight-overlay">
        {% for item in dropdown_config.items %}
            <a
                href="{{ item.request_url|default:'#' }}"
                role="menuitem"
                {% if item.htmx %}
                    hx-get="{{ item.htmx.request_url|default:item.request_url }}"
                    hx-target="{{ item.htmx.target }}"
                    hx-swap="{{ item.htmx.swap_method|default:'innerHTML' }} show:window:top"
                    hx-push-url="{{ item.htmx.push_url|yesno:'true,false' }}"
                    hx-on::after-request="document.body.dispatchEvent(new Event('PageChanged'))"
                {% endif %}
                class="flex gap-1 items-center px-4 py-2 text-sm text-insight-headline bg-insight-surface hover:bg-insight-base {% if forloop.first %}rounded-insight-control-top{% elif forloop.last %}rounded-insight-control-bottom{% endif %}"
            >
                {% if item.icon %}
                    <div>
                        {% icon item.icon %}
                    </div>
                {% endif %}
                {{ item.text }}
            </a>
        {% endfor %}
    </div>
</div>