{% 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 %}
  {% if cl.formset or action_form %}
    <script src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  <style>
    {% if not actions_on_top and not actions_on_bottom %}
      #changelist table thead th:first-child {width: inherit}
    {% endif %}
    #changelist:is(.search-mode-contents, .search-mode-deep) #result_list tbody tr.search-rank-0 {
      background: #ffffff;
      color: #111827;
    }
    #changelist:is(.search-mode-contents, .search-mode-deep) #result_list tbody tr.search-rank-0 td a {
      color: #111827;
    }
    #changelist:is(.search-mode-contents, .search-mode-deep) #result_list tbody tr.search-rank-1 {
      background: #f7f8fa;
      color: #4b5563;
    }
    #changelist:is(.search-mode-contents, .search-mode-deep) #result_list tbody tr.search-rank-1 td a {
      color: #374151;
    }
    #changelist.search-mode-deep #result_list tbody tr.search-rank-2 {
      background: #f3f4f6;
      color: #6b7280;
    }
    #changelist.search-mode-deep #result_list tbody tr.search-rank-2 td a {
      color: #4b5563;
    }
  </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="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
&rsaquo; {{ cl.opts.verbose_name_plural|capfirst }}
</div>
{% endblock %}
{% endif %}

{% block coltype %}{% endblock %}

{% block content %}
  <div id="content-main">
    {% block object-tools %}
        <ul class="object-tools">
          {% block object-tools-items %}
            {% change_list_object_tools %}
          {% endblock %}
        </ul>
    {% endblock %}
    {% if cl.formset and cl.formset.errors %}
        <p class="errornote">
        {% blocktranslate count counter=cl.formset.total_error_count %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
        </p>
        {{ cl.formset.non_form_errors }}
    {% endif %}
    {% if cl.model_admin.show_search_mode_selector %}
      {% with current_search_mode=cl.params.search_mode|default:cl.model_admin.get_default_search_mode %}
        <div class="module{% if cl.has_filters %} filtered{% endif %}{% if current_search_mode == 'contents' %} search-mode-contents{% elif current_search_mode == 'deep' %} search-mode-deep{% endif %}" id="changelist">
      {% endwith %}
    {% else %}
        <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
    {% endif %}
      <div class="changelist-form-container">
        <div>
          {% block search %}{% search_form cl %}{% 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>{% csrf_token %}
          {% if cl.formset %}
            <div>{{ cl.formset.management_form }}</div>
          {% endif %}

          {% block result_list %}
            {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
            {% result_list cl %}
            {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
          {% endblock %}
          {% block pagination %}
          <div class="changelist-footer">
            {% pagination cl %}
            {% if cl.formset and cl.result_count %}<input type="submit" name="_save" class="default" value="{% translate 'Save' %}">{% endif %}
          </div>
          {% endblock %}
          </form>
        </div>
      </div>
      {% block filters %}
        {% if cl.has_filters %}
        <div id="changelist-filter">
          <h2>
            {% translate 'Filter' %}
            <button
              type="button"
              id="changelist-filter-toggle"
              class="filter-toggle"
              aria-expanded="true"
              data-show-label="{% translate 'Filters' %}"
              data-hide-label="{% translate 'Hide' %}"
            >
              {% translate 'Hide' %}
            </button>
          </h2>
          {% if cl.is_facets_optional or cl.has_active_filters %}<div id="changelist-filter-extra-actions">
            {% if cl.is_facets_optional %}<h3>
              {% if cl.add_facets %}<a href="{{ cl.remove_facet_link }}" class="hidelink">{% translate "Hide counts" %}</a>
              {% else %}<a href="{{ cl.add_facet_link }}" class="viewlink">{% translate "Show counts" %}</a>{% endif %}
            </h3>{% endif %}
            {% if cl.has_active_filters %}<h3>
              <a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "Clear all filters" %}</a>
            </h3>{% endif %}
          </div>{% endif %}
          {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
        </div>
        {% endif %}
      {% endblock %}
    </div>
  </div>
  {% if cl.has_filters %}
    <script>
      (function() {
        var storageKey = 'admin-filters-collapsed';
        var toggle = document.getElementById('changelist-filter-toggle');
        var toolbarToggle = document.getElementById('changelist-toolbar-filter-toggle');
        if (!toggle) return;

        function applyState() {
          var collapsed = localStorage.getItem(storageKey) === 'true';
          document.body.classList.toggle('filters-collapsed', collapsed);
          toggle.textContent = collapsed ? toggle.dataset.showLabel : toggle.dataset.hideLabel;
          toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
          if (toolbarToggle) {
            toolbarToggle.textContent = toggle.dataset.showLabel;
            toolbarToggle.style.display = collapsed ? 'inline-block' : 'none';
          }
        }

        toggle.addEventListener('click', function() {
          localStorage.setItem(storageKey, document.body.classList.contains('filters-collapsed') ? 'false' : 'true');
          applyState();
        });

        if (toolbarToggle) {
          toolbarToggle.addEventListener('click', function() {
            localStorage.setItem(storageKey, 'false');
            applyState();
          });
        }

        applyState();
      })();
    </script>
  {% endif %}
{% endblock %}