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

{% block extrastyle %}
  {{ block.super }}
  {% if cl.formset or action_form %}
    <script src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  {% if not actions_on_top and not actions_on_bottom %}
    <style>
      #changelist table thead th:first-child {width: inherit}
    </style>
  {% endif %}
{% endblock %}

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


{% block toolbar-search %}{% search_form cl %}{% endblock toolbar-search %}
{% block content_title %}
  {% if page_title %} {{ page_title }}{% else %}{{ opts.verbose_name_plural|title }}{% endif %}
{% endblock %}

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

{% if not is_popup %}
  {% block breadcrumbs %}
    <li class="breadcrumb-item"><a href="{% url 'admin:index' %}">{% translate 'Home' %}</a></li>
    {% if is_app_index_enabled %}
      <li class="breadcrumb-item"><a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a></li>
    {% else %}
      <li class="breadcrumb-item">
        {{ cl.opts.app_config.verbose_name }}
      </li>
    {% endif %}
    <li class="breadcrumb-item">{{ cl.opts.verbose_name_plural|capfirst }}</li>
  {% endblock %}
{% endif %}

{% block object-tools %}
  <div class="object-tools-wrapper d-flex mb-1 mb-lg-0">
    {% block object-tools-items %}
      {% change_list_object_tools %}
    {% endblock %}
  </div>
{% endblock %}

{% block content %}
  
  {% block alt_content %}
  {% endblock alt_content %}
  
  {% block main_content %}
    {% if cl.formset and cl.formset.errors %}
      <p class="errornote">
        {% if cl.formset.total_error_count == 1 %}
          {% translate "Please correct the error below." %}
        {% else %}
          {% translate "Please correct the errors below." %}
        {% endif %}
      </p>
      {{ cl.formset.non_form_errors }}
    {% endif %}
    
    <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
      <div class="changelist-form-container">
        
        {% 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 %}
          
          <div class="card shadow-sm">
          {% block result_list %}
            
            {% if action_form and actions_on_top and cl.show_admin_actions %}
              <div class="card-header bg-body p-4">
                {% admin_actions %}
              </div>
            {% endif %}
            
            {% result_list cl %}
            {% block pagination %}
              <div class="mb-3 px-3">
                {% pagination cl %}
              </div>
            {% endblock %}
            
            {% if action_form and actions_on_bottom and cl.show_admin_actions %}
              <div class="card-footer">
                {% admin_actions %}
              </div>
            {% endif %}

          {% endblock %}
          </div>
        </form>
      </div>
    </div>
  {% endblock main_content %}
  
{% endblock %}

{% block sidenav_right_wrapper %}
  {% if cl.has_filters %}
    <div x-bind:class="! drawerRightOpen ? 'hide' : 'expand'" id="sidenav-wrapper" class="d-none d-lg-flex sidenav-wrapper-right {% block sidebar_right_classes %}{% endblock %}">
      <div id="sidenav-inner" x-bind:class="! drawerRightOpen ? 'hide' : 'expand'" class="bg-body border-start shadow-sm">
        <div x-bind:class="! drawerRightOpen ? '' : 'border-bottom'" class="d-flex justify-content-between align-items-center py-3">
          <div x-bind:class="! drawerRightOpen ? 'd-none' : 'd-inline-block'" class="ms-4 fs-5">{% trans "Filter" %}</div>
          <a class="btn-icon btn-icon-46px link-secondary" @click="drawerRightOpen = !drawerRightOpen" href="#">
            <i x-bind:class="! drawerRightOpen ? 'mdi-{% block sidenav_right_icon %}filter-outline{% endblock %}' : 'mdi-close'" class="mdi mdi-24px"></i>
          </a>
        </div>
        <div x-bind:class="! drawerRightOpen ? 'd-none' : ''" class="flex-fill" style="overflow-y: auto;">
          <div class="card-body p-4">
            {% if cl.has_active_filters %}
              <div id="changelist-filter-clear" class="fw-bold mb-3">
                <a href="{{ cl.clear_all_filters_qs }}" class="d-flex align-items-center">
                  <i class="mdi mdi-close-circle-outline mdi-18px me-1"></i>{% translate "Clear all filters" %}
                </a>
              </div>
            {% endif %}
            {% for spec in cl.filter_specs %}
              <div class="filter-widget pb-3">
                {% admin_list_filter cl spec %}
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="border-top p-2" x-bind:class="! drawerRightOpen ? 'd-none' : 'd-block'">
          <div class="">
            <div>
              <i class="mdi mdi-help-circle-outline"></i>
              {% trans "Guide" %}
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock sidenav_right_wrapper %}
