{% load i18n admin_filters %}
<style>
    #nav-sidebar .active-item-link {
        background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)) !important;
        color: white !important;
    }
    #nav-sidebar .active-item-link span,
    #nav-sidebar .active-item-link i {
        color: white !important;
    }
    #nav-sidebar .active-item-link .active-indicator {
        display: block !important;
    }
</style>
<div class="flex flex-col h-full overflow-hidden">
    <!-- Branding / Logo -->
    <div class="flex flex-col items-center justify-center py-8 border-b border-black/5 dark:border-white/5">
        <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center shadow-xl shadow-blue-500/30 mb-4 transition-transform hover:scale-105">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
            </svg>
        </div>
        <h1 class="text-lg font-black tracking-tighter text-gray-900 dark:text-white uppercase">Django <span class="text-blue-500">Admin</span></h1>
        <p class="text-[10px] font-black text-gray-400 dark:text-gray-500 uppercase tracking-[0.2em] mt-1">v6.1.dev-apple</p>
    </div>

    <!-- Navigation Scrollable Area -->
    <nav class="flex-1 overflow-y-auto custom-scrollbar px-2 py-6 space-y-8">
        <!-- Generic Link: Dashboard -->
        <div class="px-2">
            <a href="{% url 'admin:index' %}" 
               class="relative flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-300 group 
               {% if request.path == '/admin/' %} from-blue-600 to-blue-700 shadow-lg shadow-blue-500/30 active-item-link {% else %} text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 font-bold {% endif %}">
                <i class="pi pi-th-large {% if request.path == '/admin/' %}text-white{% else %}text-blue-500{% endif %} text-[14px]"></i>
                <span class="text-[13px] tracking-tight">{% translate 'Dashboard' %}</span>
                <div class="active-indicator absolute -left-2 w-1.5 h-6 bg-white rounded-r-full top-1/2 -translate-y-1/2 hidden"></div>
            </a>
        </div>

        <!-- Dynamic App List -->
        <div id="nav-app-list">
            {% if available_apps %}
              {% for app in available_apps %}
                <div class="app-group mb-8">
                    <h3 class="px-6 mb-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 flex items-center gap-2">
                        <i class="pi {% if app.app_label == 'auth' %}pi-lock{% elif app.app_label == 'shop' %}pi-shopping-bag{% else %}pi-folder{% endif %} text-[10px] text-blue-500/50"></i>
                        {{ app.name }}
                    </h3>
                    <div class="space-y-1">
                        {% for model in app.models %}
                            {% get_model_icon app.app_label model.object_name as custom_icon %}
                            <div class="model-item group flex items-center px-2">
                                <a href="{{ model.admin_url|default:'#' }}" 
                                   class="relative flex-1 flex items-center justify-between px-4 py-3 rounded-2xl transition-all duration-300 
                                   {% if model.admin_url in request.path or model.add_url in request.path %}
                                        from-blue-600 to-blue-700 shadow-lg shadow-blue-500/30 active-item-link
                                   {% else %}
                                        text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 font-bold
                                   {% endif %}">
                                    <div class="flex items-center gap-3">
                                        <i class="pi 
                                            {% if custom_icon %}{{ custom_icon }}
                                            {% elif model.object_name == 'User' %}pi-user
                                            {% elif model.object_name == 'Group' %}pi-users
                                            {% elif model.object_name == 'Category' %}pi-tag
                                            {% elif model.object_name == 'Product' %}pi-box
                                            {% elif model.object_name == 'Order' %}pi-shopping-cart
                                            {% elif model.object_name == 'Customer' %}pi-id-card
                                            {% else %}pi-circle-fill{% endif %} 
                                            text-[14px]"></i>
                                        <span class="text-[13px] tracking-tight">{{ model.name }}</span>
                                    </div>
                                    
                                    {% if model.add_url and not model.admin_url in request.path %} 
                                        <a href="{{ model.add_url }}" class="p-1 rounded-lg hover:bg-blue-500 hover:text-white transition-all opacity-0 group-hover:opacity-100 text-blue-500/50" title="{% translate 'Add' %}">
                                            <i class="pi pi-plus text-[10px]"></i>
                                        </a>
                                    {% endif %}

                                    <div class="active-indicator absolute -left-2 w-1.5 h-6 bg-white rounded-r-full top-1/2 -translate-y-1/2 hidden border border-blue-400/20"></div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
              {% endfor %}
            {% endif %}
        </div>
    </nav>

    <!-- Footer Sidebar -->
    <div class="p-4 border-t border-black/5 dark:border-slate-800">
        <a href="https://www.djangoproject.com/" target="_blank" class="flex items-center justify-center p-3 rounded-2xl bg-gray-100 dark:bg-black/40 hover:scale-95 transition-transform">
             <img src="https://static.djangoproject.com/img/badges/django-built-with-160x33.png" alt="Django" class="h-4 dark:opacity-50" />
        </a>
    </div>
</div>