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

{% block extrastyle %}
  {{ block.super }}
  {% 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 }}
  {% 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 }}
<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 class="row">
        <div class="col-md-12">
            <div class="card module{% if cl.has_filters %} filtered{% endif %}"  id="changelist">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-content-center">
                        <div>
                            {% block search %}{% search_form cl %}{% endblock %}
                            {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
                        </div>
                        <div class="d-flex">
                            {% include 'admin/filter-option.html' %}
                            {% block object-tools %}
                                <ul class="object-tools mb-0 ps-0">
                                    {% block object-tools-items %}
                                        {% change_list_object_tools %}
                                    {% endblock %}
                                </ul>
                            {% endblock %}
                        </div>
                    </div>
                    
                    {% 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 %}

                    <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="mt-5">
                                {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
                            </div>
                            {% result_list cl %}
                            {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
                        {% endblock %}
                        {% block pagination %}{% pagination cl %}{% endblock %}
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        $(document).ready(function() {
            $('select').addClass('form-select');
            $('input[type="checkbox"]').addClass('form-check-input');
            $('input[type="checkbox"]').wrap('<div class="form-check"></div>');
        });
    </script>
{% endblock %}