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

{% block extrastyle %}
  {{ block.super }}
  {% if cl.formset or action_form %}
    <script src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  {{ media.js }}
{% endblock %}

{% block content %}
<div class="flex h-screen overflow-hidden bg-slate-50 dark:bg-slate-950">
  {% include "admin/includes/forge_sidebar.html" %}
  <main class="flex-1 h-screen overflow-hidden flex flex-col">
    {% include "admin/includes/forge_topbar.html" with subtitle="Browse, filter and manage records" %}
    <section class="flex-1 overflow-y-auto p-6">
      <div id="changelist" class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base font-semibold text-slate-900 dark:text-slate-100">{{ cl.opts.verbose_name_plural|capfirst }}</h2>
          <div class="flex items-center gap-2">
            <button type="button" data-open-filters-modal class="rounded-md border border-slate-300 dark:border-slate-700 px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 inline-flex items-center gap-1.5">
              {% forge_icon "filter" "h-4 w-4" %}
              <span>Filters</span>
            </button>
            {% if has_add_permission %}
              <a href="{% url cl.opts|admin_urlname:'add' %}" class="rounded-md forge-accent-bg text-white px-3 py-2 text-sm">
                <span class="inline-flex items-center gap-1.5">
                  {% forge_icon "plus" "h-4 w-4" %}
                  <span>Add {{ cl.opts.verbose_name }}</span>
                </span>
              </a>
            {% endif %}
          </div>
        </div>
        {% if cl.search_fields %}
          <form id="changelist-search" method="get" class="mb-4">
            <input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar"
              class="w-full rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm"
              placeholder="Search {{ cl.opts.verbose_name_plural }}">
          </form>
        {% endif %}
        {% if cl.filter_specs %}
          <div class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs uppercase tracking-wide text-slate-500">Active filters</span>
            {% for spec in cl.filter_specs %}
              {% for key, value in spec.used_parameters.items %}
                <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-3 py-1 text-xs text-slate-700 dark:text-slate-200">
                  {{ key }}: {{ value }}
                </span>
              {% endfor %}
            {% endfor %}
          </div>
        {% endif %}
        <form id="changelist-form" method="post" novalidate>
          {% csrf_token %}
          {% if cl.formset %}
            <div>{{ cl.formset.management_form }}</div>
          {% endif %}

          {% if action_form and actions_on_top and cl.show_admin_actions %}
            <div class="mb-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-3">
              <p class="mb-2 text-xs uppercase tracking-wide text-slate-500">Bulk actions</p>
              {% admin_actions %}
            </div>
          {% endif %}

          {% if cl.result_count %}
            {% result_list cl %}
            {% if action_form and actions_on_bottom and cl.show_admin_actions %}
              <div class="mt-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-3">
                <p class="mb-2 text-xs uppercase tracking-wide text-slate-500">Bulk actions</p>
                {% admin_actions %}
              </div>
            {% endif %}
            {% pagination cl %}
          {% else %}
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/40 py-16 px-6 text-center">
              <div class="mx-auto h-16 w-16 rounded-full border border-slate-200 dark:border-slate-700 flex items-center justify-center mb-4 text-slate-500">
                {% forge_icon "inbox" "h-7 w-7" %}
              </div>
              <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100">No results found</h3>
              <p class="text-sm text-slate-500 mt-2">This page yielded no results. Create a new item or reset your filters.</p>
              <div class="mt-5 flex flex-wrap justify-center gap-2">
                {% if has_add_permission %}
                  <a href="{% url cl.opts|admin_urlname:'add' %}" class="inline-flex items-center gap-1.5 rounded-md forge-accent-bg text-white px-3 py-2 text-sm">
                    {% forge_icon "plus" "h-4 w-4" %}
                    <span>Add {{ cl.opts.verbose_name }}</span>
                  </a>
                {% endif %}
                <a href="{{ request.path }}" class="inline-flex items-center gap-1.5 rounded-md border border-slate-300 dark:border-slate-700 px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800">
                  {% forge_icon "filter" "h-4 w-4" %}
                  <span>Reset filters</span>
                </a>
              </div>
            </div>
          {% endif %}
        </form>
      </div>
    </section>
  </main>
</div>

<div class="hidden fixed inset-0 z-40 bg-slate-950/60 backdrop-blur-sm" data-filters-modal-overlay></div>
<div class="hidden fixed z-50 inset-x-0 top-14 mx-auto w-[min(54rem,95vw)] rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-2xl" data-filters-modal>
  <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200 dark:border-slate-700">
    <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Filters</h3>
    <button type="button" class="rounded-md border border-slate-300 dark:border-slate-700 px-2 py-1 text-xs text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800" data-close-filters-modal>
      Close
    </button>
  </div>
  <div class="p-4 max-h-[70vh] overflow-auto">
    {% if cl.filter_specs %}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        {% for spec in cl.filter_specs %}
          <div class="rounded-md border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 p-2">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-1">{{ spec.title }}</p>
            <ul class="space-y-1">
              {% for choice in spec.choices %}
                <li>
                  <a href="{{ choice.query_string }}" class="text-sm {% if choice.selected %}text-emerald-600 dark:text-emerald-400 font-medium{% else %}text-slate-700 dark:text-slate-200 hover:text-slate-900 dark:hover:text-white{% endif %}">
                    {{ choice.display }}
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-sm text-slate-500">No filters configured for this model.</p>
    {% endif %}
  </div>
</div>
{% endblock %}