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

{% 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 %}
  {% if cl.formset or action_form %}
    <script src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  <style>
    #changelist {
      gap: 0.75rem !important;
    }
    #changelist .changelist-form-container,
    #changelist-form {
      width: 100% !important;
      margin-right: 0 !important;
    }
    #changelist table {
      width: 100% !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      border: 1px solid rgba(226, 232, 240, 0.5) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
    }
    .dark #changelist table {
      border-color: rgba(31, 41, 55, 0.5) !important;
    }
    #changelist table thead th {
      background: rgba(99, 102, 241, 0.03) !important;
      border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
      color: #475569 !important;
      font-size: 0.75rem !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.05em !important;
      padding: 14px 16px !important;
    }
    .dark #changelist table thead th {
      background: rgba(17, 24, 39, 0.4) !important;
      border-bottom-color: rgba(31, 41, 55, 0.6) !important;
      color: #94a3b8 !important;
    }
    #changelist table tbody tr {
      border-bottom: 1px solid rgba(226, 232, 240, 0.3) !important;
      transition: all 0.2s ease !important;
    }
    .dark #changelist table tbody tr {
      border-bottom-color: rgba(31, 41, 55, 0.2) !important;
    }
    #changelist table tbody tr:hover {
      background-color: rgba(99, 102, 241, 0.02) !important;
    }
    .dark #changelist table tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.01) !important;
    }
    #changelist table tbody td, #changelist table tbody th {
      padding: 12px 16px !important;
      font-size: 0.85rem !important;
    }
    #changelist table tbody th a {
      color: #6366f1 !important;
      font-weight: 600 !important;
    }
    .dark #changelist table tbody th a {
      color: #818cf8 !important;
    }
    {% if not actions_on_top and not actions_on_bottom %}
      #changelist table thead th:first-child {width: inherit}
    {% endif %}
  </style>
{% 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 %}

{% if not is_popup %}
{% block breadcrumbs %}
<div class="flex items-center gap-2 text-xs font-medium text-apple-secondary mb-4">
  <a href="{% url 'admin:index' %}" class="hover:text-apple-blue transition-colors">{% translate 'Home' %}</a>
  <svg class="w-3 h-3 text-apple-secondary/50" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
  <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}" class="hover:text-apple-blue transition-colors">{{ cl.opts.app_config.verbose_name }}</a>
  <svg class="w-3 h-3 text-apple-secondary/50" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
  <span class="text-apple-text dark:text-apple-darktext font-semibold">{{ cl.opts.verbose_name_plural|capfirst }}</span>
</div>
{% endblock %}
{% endif %}

{% block object-tools %}{% endblock %}

{% block content_width_class %}w-full max-w-none{% endblock %}

{% block content_container %}
  <div id="changelist">
    {% block filters %}
      {% if cl.has_filters %}
        <details style="width: 100% !important" class="group bg-slate-50 dark:bg-zinc-900/30 border border-slate-200 dark:border-zinc-800/80 rounded-2xl shadow-sm overflow-hidden transition-all duration-200" {% if cl.has_active_filters %}open{% endif %}>
          <summary class="flex items-center justify-between p-6 cursor-pointer list-none focus:outline-none select-none">
            <div class="flex items-center gap-2.5">
              <svg class="w-5 h-5 text-apple-blue" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /></svg>
              <h2 class="text-base font-bold tracking-tight text-apple-text dark:text-apple-darktext">{% translate 'Filters' %}</h2>
              {% if cl.has_active_filters %}
                <span class="px-2.5 py-0.5 text-xs font-semibold bg-apple-blue/10 text-apple-blue rounded-full">{% translate "Active" %}</span>
              {% endif %}
            </div>
            <div class="flex items-center gap-4">
              {% if cl.is_facets_optional or cl.has_active_filters %}
                <div id="changelist-filter-extra-actions" class="flex flex-wrap gap-2 text-xs" onclick="event.stopPropagation();">
                  {% if cl.is_facets_optional %}
                    {% if cl.add_facets %}
                      <a href="{{ cl.remove_facet_link }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-apple-bg dark:bg-black/40 border border-apple-border/50 dark:border-apple-darkborder/50 rounded-lg font-semibold hover:text-apple-blue transition-colors text-apple-text dark:text-apple-darktext">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>
                        <span>{% translate "Hide counts" %}</span>
                      </a>
                    {% else %}
                      <a href="{{ cl.add_facet_link }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-apple-bg dark:bg-black/40 border border-apple-border/50 dark:border-apple-darkborder/50 rounded-lg font-semibold hover:text-apple-blue transition-colors text-apple-text dark:text-apple-darktext">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.754C3.183 7.262 6.822 4.5 11.96 4.5s8.778 2.762 9.924 7.068a1.01 1.01 0 010 .754C20.817 16.738 17.178 19.5 12 19.5c-5.18 0-8.822-2.762-9.924-7.068z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                        <span>{% translate "Show counts" %}</span>
                      </a>
                    {% endif %}
                  {% endif %}
                  {% if cl.has_active_filters %}
                    <a href="{{ cl.clear_all_filters_qs }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50 rounded-lg font-semibold text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40 transition-colors">
                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
                      <span>{% translate "Clear all" %}</span>
                    </a>
                  {% endif %}
                </div>
              {% endif %}
              <svg class="w-5 h-5 transform group-open:rotate-180 transition-transform duration-200 text-apple-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
            </div>
          </summary>
          
          <div class="px-6 pb-6 border-t border-apple-border/20 dark:border-apple-darkborder/20 pt-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {% for spec in cl.filter_specs %}
                {% admin_list_filter cl spec %}
              {% endfor %}
            </div>
          </div>
        </details>
      {% endif %}
    {% endblock %}

    {% block content %}
      <div id="content-main" style="width: 100% !important;">
        {% if cl.formset and cl.formset.errors %}
            <div class="p-4 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50 rounded-xl text-sm font-medium text-red-700 dark:text-red-400 mb-6">
              {% blocktranslate count counter=cl.formset.total_error_count %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
              {{ cl.formset.non_form_errors }}
            </div>
        {% endif %}
        
        <div style="width: 100% !important;" class="changelist-form-container bg-white dark:bg-apple-darkcard border border-apple-border/40 dark:border-apple-darkborder/40 rounded-2xl shadow-sm p-6 space-y-6">
          {% block search %}
            {% if cl.search_fields %}
            <div id="toolbar" class="mb-6">
              <form id="changelist-search" method="get" role="search" class="space-y-2">
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                  <div class="relative flex-1 flex items-center h-11 bg-apple-bg dark:bg-black/30 border border-apple-border/50 dark:border-apple-darkborder/50 rounded-lg shadow-sm focus-within:ring-2 focus-within:ring-apple-blue/20 focus-within:border-apple-blue transition-all px-3 py-1">
                    <div class="flex items-center pointer-events-none">
                      <svg class="h-4.5 w-4.5 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                      </svg>
                    </div>
                    <input type="text" size="40" name="q" value="{{ cl.query }}" id="searchbar" {% if cl.search_help_text %} aria-describedby="searchbar_helptext"{% endif %} placeholder="{% translate 'Search database...' %}" class="w-full bg-transparent border-none outline-none text-sm font-medium text-apple-text dark:text-apple-darktext placeholder:text-apple-secondary/50 focus:ring-0" style="border: none !important; box-shadow: none !important; padding: 0 !important; margin-left: 0.65rem !important;">
                  </div>
                  
                  <button type="submit" class="inline-flex items-center justify-center gap-2 h-11 px-6 bg-apple-blue hover:bg-apple-blue-hover text-white rounded-lg text-sm font-semibold transition-all duration-150 shadow-sm shadow-apple-blue/10 hover:shadow-apple-blue/20 cursor-pointer">
                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <span>{% translate 'Search' %}</span>
                  </button>

                  {% if has_add_permission %}
                    {% url cl.opts|admin_urlname:'add' as add_url %}
                    <a href="{% add_preserved_filters add_url is_popup to_field %}" class="inline-flex items-center justify-center h-11 w-11 bg-green-500 hover:bg-green-600 text-white rounded-lg shadow-sm shadow-green-500/10 hover:shadow-green-500/20 transition-all duration-150 cursor-pointer shrink-0" title="{% blocktranslate with cl.opts.verbose_name as name %}Add {{ name }}{% endblocktranslate %}">
                      <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
                    </a>
                  {% endif %}

                  {% if cl.result_count != cl.result_list|length %}
                    <span class="text-xs font-semibold bg-white dark:bg-black/40 border border-apple-border/50 dark:border-apple-darkborder/50 h-11 px-4 rounded-lg text-apple-secondary flex items-center gap-2 self-center sm:ml-2 shadow-sm">
                      <span class="w-1.5 h-1.5 rounded-full bg-apple-blue"></span>
                      {% blocktranslate count counter=cl.result_count %}{{ counter }} result{% plural %}{{ counter }} results{% endblocktranslate %} 
                      (<a href="?{% if cl.is_popup %}{{ is_popup_var }}=1{% if cl.add_facets %}&{% endif %}{% endif %}{% if cl.add_facets %}{{ is_facets_var }}{% endif %}" class="text-apple-blue hover:underline font-bold">{% if cl.show_full_result_count %}{% blocktranslate with full_result_count=cl.full_result_count %}{{ full_result_count }} total{% endblocktranslate %}{% else %}{% translate "Show all" %}{% endif %}</a>)
                    </span>
                  {% endif %}

                  {% for pair in cl.params.items %}
                      {% if pair.0 != 'q' %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">{% endif %}
                  {% endfor %}
                </div>
                {% if cl.search_help_text %}
                  <p class="text-xs text-apple-secondary pl-1" id="searchbar_helptext">{{ cl.search_help_text }}</p>
                {% endif %}
              </form>
            </div>
            {% endif %}
          {% endblock %}
          {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}

          <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate class="space-y-6">{% csrf_token %}
          {% if cl.formset %}
            <div>{{ cl.formset.management_form }}</div>
          {% endif %}

          {% block result_list %}
            <div class="space-y-4">
              {% if action_form and actions_on_top and cl.show_admin_actions %}
                <div class="p-3 bg-apple-bg/50 dark:bg-black/20 border border-apple-border/20 dark:border-apple-darkborder/20 rounded-xl">
                  {% admin_actions %}
                </div>
              {% endif %}
              
              <div class="overflow-x-auto w-full">
                {% result_list cl %}
              </div>
              
              {% if action_form and actions_on_bottom and cl.show_admin_actions %}
                <div class="p-3 bg-apple-bg/50 dark:bg-black/20 border border-apple-border/20 dark:border-apple-darkborder/20 rounded-xl">
                  {% admin_actions %}
                </div>
              {% endif %}
            </div>
          {% endblock %}
          
          {% block pagination %}
            <div class="pt-4 border-t border-apple-border/20 dark:border-apple-darkborder/20">
              {% pagination cl %}
            </div>
          {% endblock %}
          </form>
        </div>
      </div>
      
      <script>
        document.addEventListener('DOMContentLoaded', () => {
          const table = document.getElementById('result_list');
          if (!table) return;
          
          // 1. Add Actions header to thead
          const theadRow = table.querySelector('thead tr');
          if (theadRow) {
            const actionsHeader = document.createElement('th');
            actionsHeader.scope = 'col';
            actionsHeader.className = 'text-right p-4 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-zinc-400 w-32';
            actionsHeader.innerHTML = '<div class="text text-right">Actions</div>';
            theadRow.appendChild(actionsHeader);
          }
          
          // 2. Process each row in tbody
          const rows = table.querySelectorAll('tbody tr');
          rows.forEach(row => {
            let detailUrl = null;
            let originalLink = null;
            
            // Scan all links in the row to find the detail link (ends with /change/ or contains /change/?)
            const links = row.querySelectorAll('a');
            links.forEach(link => {
              const href = link.getAttribute('href');
              if (href && (href.endsWith('/change/') || href.includes('/change/?') || href.includes('/change/&') || /\/\d+\/change\//.test(href))) {
                detailUrl = href;
                originalLink = link;
              }
            });
            
            if (detailUrl && originalLink) {
              // Replace the clickable link with its plain text
              const textSpan = document.createElement('span');
              textSpan.textContent = originalLink.textContent;
              textSpan.className = 'text-slate-700 dark:text-zinc-300 font-semibold';
              originalLink.parentNode.replaceChild(textSpan, originalLink);
              
              // Compute delete URL
              const deleteUrl = detailUrl.replace('/change/', '/delete/');
              
              // Create Actions cell
              const actionsCell = document.createElement('td');
              actionsCell.className = 'p-4 text-right align-middle whitespace-nowrap space-x-2';
              
              // Detail button
              const detailBtn = document.createElement('a');
              detailBtn.href = detailUrl;
              detailBtn.className = 'inline-flex items-center justify-center p-2 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-lg transition-colors';
              detailBtn.setAttribute('data-tooltip', 'Dettaglio');
              detailBtn.innerHTML = `
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" /></svg>
              `;
              
              // Delete button
              const deleteBtn = document.createElement('a');
              deleteBtn.href = deleteUrl;
              deleteBtn.className = 'inline-flex items-center justify-center p-2 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/20 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-lg transition-colors';
              deleteBtn.setAttribute('data-tooltip', 'Elimina');
              deleteBtn.innerHTML = `
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
              `;
              
              actionsCell.appendChild(detailBtn);
              actionsCell.appendChild(deleteBtn);
              row.appendChild(actionsCell);
            } else {
              const actionsCell = document.createElement('td');
              row.appendChild(actionsCell);
            }
          });
        });
      </script>
    {% endblock %}
  </div>
{% endblock %}