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

{% block accordion_toggle %}
    <div
        class="mt-3 d-flex justify-content-center align-items-baseline cursor-pointer text-app-link-side-navigation mb-1 ps-1 pe-0"
        style="width: 150px"
    >
        <i class="fs-6 me-2 {% block nav_icon %}{% endblock %}"></i>

        <span class="h6 mb-0">
            {% block nav_title %}
            {% endblock %}
        </span>

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

{% block accordion_content %}
    <div
        class="ms-2 mb-2 mt-1 border-start border-2"
        @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 %}