{% extends 'django_spire/accordion/accordion.html' %}

{% block accordion_toggle %}
    <div
        class="d-flex align-items-center rounded-3 py-2 fw-medium cursor-pointer text-app-link-side-navigation ds-fs-9"
        :class="{
            'justify-content-center px-0': collapsed,
            'gap-2 px-3': !collapsed
        }"
    >
        <i class="{% block nav_icon %}{% endblock %} flex-shrink-0" :style="collapsed ? 'font-size: 1.25rem;' : 'width: 1.25rem;'"></i>

        <span class="text-truncate" x-show="!collapsed">
            {% block nav_title %}
            {% endblock %}
        </span>

        <span
            class="ms-auto small"
            :class="{'bi bi-chevron-right': !show_accordion, 'bi bi-chevron-down': show_accordion}"
            x-show="!collapsed"
        >
        </span>
    </div>
{% endblock %}

{% block accordion_content %}
    <div
        class="ms-2 mb-2 mt-1 border-start border-2"
        x-show="!collapsed"
        @accordion-link="accordion_paths.push($event.detail.url_path); check_path()"
        x-data="{
            accordion_paths: [],
            current_path: '{{ request.path }}',
            check_path() {
                if (this.accordion_paths.includes(this.current_path)) {
                    this.show_accordion = true
                }
            }
        }"
    >
        <div class="ps-2">
            {% block accordion_links %}
            {% endblock %}
        </div>
    </div>
{% endblock %}
