{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block title %}{% if cl.formset and cl.formset.errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static "admin/css/changelists.css" %}">
  {% if cl.formset %}
    <link rel="stylesheet" href="{% static "admin/css/forms.css" %}">
  {% endif %}
  {{ media.css }}
{% endblock %}

{% block extrahead %}
{{ block.super }}
{{ media.js }}
<script src="{% static 'admin/js/filters.js' %}" defer></script>
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{# Breadcrumbs inherited from base.html #}

{% block coltype %}{% endblock %}

{% block content %}
  <div id="content-main" class="flex flex-col gap-6">
    <!-- Contextual Header (Search + Global Tools) -->
    {% comment %} <div class="flex flex-col md:flex-row md:items-center justify-start gap-6 mb-2"> {% endcomment %}
     <div class="flex gap-4">
        <div>
            {% block search %}{% search_form cl %}{% endblock %}
        </div>
        
        {% block object-tools %}
            <div class="flex-shrink-0">
                <ul class="object-tools flex gap-2 list-none">
                  {% block object-tools-items %}
                    {% change_list_object_tools %}
                  {% endblock %}
                </ul>
            </div>
        {% endblock %}
    </div>

    {% if cl.formset and cl.formset.errors %}
        <div class="bg-red-500/10 border border-red-500/20 text-red-600 p-5 rounded-2xl flex items-center gap-3">
            <i class="pi pi-exclamation-circle text-xl"></i>
            <span class="font-bold">{% blocktranslate count counter=cl.formset.total_error_count %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}</span>
        </div>
        {{ cl.formset.non_form_errors }}
    {% endif %}

    <div class="flex flex-col xl:flex-row gap-6 items-start" id="changelist">
      <!-- Table Area -->
      <div class="flex-1 min-w-0 bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.02)] dark:shadow-none overflow-hidden flex flex-col">
        <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
          {% if cl.formset %}
            <div>{{ cl.formset.management_form }}</div>
          {% endif %}

          {% block result_list %}
            <div class="relative">
                {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
                <div class="overflow-x-auto custom-scrollbar">
                    {% result_list cl %}
                </div>
                {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
            </div>
          {% endblock %}

          {% block pagination %}
          <div class="p-4 bg-slate-50/30 dark:bg-slate-900/40 border-t border-slate-100 dark:border-slate-800">
              {% pagination cl %}
              {# Save changes button removed as requested #}
          </div>
          {% endblock %}
        </form>
      </div>

      <!-- Filters Area -->
      {% block filters %}
        {% if cl.has_filters %}
        <aside id="changelist-filter" class="w-full xl:w-80 flex-shrink-0 bg-white/80 dark:bg-slate-900/50 backdrop-blur-xl rounded-[2.5rem] border border-slate-200/60 dark:border-slate-800/60 shadow-xl shadow-slate-200/20 dark:shadow-none p-8 sticky top-4">
            <div class="flex items-center justify-between mb-8 pb-4 border-b border-slate-100 dark:border-slate-800">
                <h2 class="text-xs font-black uppercase tracking-[0.2em] text-slate-800 dark:text-slate-200 flex items-center gap-2">
                    <div class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></div>
                    {% translate 'Filtri' %}
                </h2>
                <i class="pi pi-sliders-h text-slate-400 dark:text-slate-600"></i>
            </div>

            <div class="flex flex-col gap-8">
                {% if cl.is_facets_optional or cl.has_active_filters %}
                <div class="grid grid-cols-1 gap-2 mb-2">
                  {% if cl.is_facets_optional %}
                    <a href="{% if cl.add_facets %}{{ cl.remove_facet_link }}{% else %}{{ cl.add_facet_link }}{% endif %}" 
                       class="flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl bg-slate-50 dark:bg-slate-800/50 text-xs font-bold text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all border border-slate-200/40 dark:border-slate-800/40 transform active:scale-[0.98]">
                        <i class="pi {% if cl.add_facets %}pi-eye-slash{% else %}pi-eye{% endif %} text-[10px]"></i>
                        {% if cl.add_facets %}{% translate "Nascondi conteggio" %}{% else %}{% translate "Mostra conteggio" %}{% endif %}
                    </a>
                  {% endif %}
                  {% if cl.has_active_filters %}
                    <a href="{{ cl.clear_all_filters_qs }}" 
                       class="flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl bg-rose-50 dark:bg-rose-500/5 text-xs font-bold text-rose-600 dark:text-rose-400 hover:bg-rose-100 dark:hover:bg-rose-500/10 transition-all border border-rose-200/40 dark:border-rose-800/40 transform active:scale-[0.98]">
                        <i class="pi pi-refresh text-[10px]"></i>
                        {% translate "Resetta filtri" %}
                    </a>
                  {% endif %}
                </div>
                {% endif %}

                <div class="space-y-4">
                    {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
                </div>
            </div>
        </aside>
        {% endif %}
      {% endblock %}
    </div>
  </div>

<style>
    /* Neo-Angular Style Overrides for Change List */
    .object-tools {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        gap: 0.5rem !important;
    }
    .object-tools li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
</style>
{% endblock %}