{% load i18n unfold %}

{% if sidebar_navigation %}
    <div id="nav-sidebar-apps" class="h-0 grow overflow-auto" data-simplebar>
        {% for group in sidebar_navigation %}
            {% if group.items %}
                {% has_nav_item_active group.items as has_active %}

                <div class="hidden mb-2 has-[ol]:has-[li]:block" {% if group.collapsible %}x-data="{navigationOpen: {% if has_active %}true{% else %}false{% endif %}}"{% endif %}>
                    {% if group.separator %}
                        <hr class="border-t border-base-200 mx-6 my-2 dark:border-base-800" />
                    {% endif %}

                    {% if group.title %}
                        <h2 class="font-semibold flex flex-row group items-center mb-1 mx-3 py-1.5 px-3 select-none text-font-important-light text-sm dark:text-font-important-dark {% if group.collapsible %}cursor-pointer hover:text-primary-600 dark:hover:text-primary-500{% endif %}" {% if group.collapsible %}x-on:click="navigationOpen = !navigationOpen"{% endif %}>
                            {{ group.title }}

                            {% include "unfold/helpers/app_list_badge.html" with item=group %}

                            {% if group.collapsible %}
                                <span class="material-symbols-outlined ml-auto transition-all group-hover:text-primary-600 dark:group-hover:text-primary-500" x-bind:class="{'rotate-90': navigationOpen}">
                                    chevron_right
                                </span>
                            {% endif %}
                        </h2>
                    {% endif %}

                    <ol class="flex flex-col gap-1 px-6" {% if group.collapsible %}x-show="navigationOpen"{% endif %}>
                        {% for item in group.items %}
                            {% if item.has_permission %}
                                <li>
                                    <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}" class="flex h-[38px] items-center -mx-3 px-3 rounded-default hover:text-primary-600 dark:hover:text-primary-500 {% if item.active %}bg-base-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500 active{% endif %}">
                                        {% if item.icon %}
                                            <span class="material-symbols-outlined md-18 mr-3 w-[18px]">
                                                {{ item.icon }}
                                            </span>
                                        {% endif %}

                                        <span>{{ item.title|safe }}</span>

                                        {% include "unfold/helpers/app_list_badge.html" with item=item %}
                                    </a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ol>
                </div>
            {% endif %}
        {% endfor %}

        {% if sidebar_show_all_applications and app_list|length > 0 %}
            <div class="mb-4 mt-3">
                <hr class="border-t border-base-200 mx-6 my-2 dark:border-base-800" />
                    <div class="mb-3"><h3 class="mb-1 mx-3 py-1.5 px-3 font-bold text-font-important-light text-sm dark:text-font-important-dark">Applications</h3></div>
                {% for app in app_list %}
                    <div class="mb-3 last:mb-0">
                        <h3 class="mb-1 mx-3 py-1.5 px-3 font-semibold text-font-important-light text-sm dark:text-font-important-dark">
                            {{ app.name }}
                        </h3>

                        <ol class="flex flex-col gap-1 px-6">
                            {% for model in app.models %}
                                <li>
                                    <a href="{{ model.admin_url }}" class="flex h-[38px] items-center -mx-3 px-3 rounded-default hover:text-primary-600 dark:hover:text-primary-500">
                                        <span>{{ model.name }}</span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ol>
                    </div>
                    <hr class="border-t border-base-200 mx-6 my-2 dark:border-base-800">
                {% endfor %}
            </div>
        {% endif %}
    </div>
{% else %}
    <p>
        {% trans "You don't have permission to view or edit anything." as error_message %}
        {% include "unfold/helpers/messages/error.html" with error=error_message %}
    </p>
{% endif %}