{% extends "layouts/base.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "assets/css/forms.css" %}">
    {% if cl.formset or action_form %}
        <script type="text/javascript" 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 %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
            <div class="d-block mb-4 mb-md-0">
                <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                    <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                        <li class="breadcrumb-item">
                            <a href="{% url 'admin:index' %}">
                                <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            </a>
                        </li>
                        <li class="breadcrumb-item">
                          <a href="{% url 'admin:app_list' cl.opts.app_config.label %}">
                            {{ cl.opts.app_config.verbose_name }}
                          </a>
                        </li>
                        <li class="breadcrumb-item active"
                            aria-current="page">{{ cl.opts.verbose_name_plural|capfirst }}</li>
                    </ol>
                </nav>
                <h2 class="h4">{{ cl.opts.verbose_name_plural|capfirst }}</h2>
            </div>
        </div>
    {% endblock %}
{% endif %}

{% block content %}
    <div class="content">
        <div class="table-settings mb-4 main-footer">
            <div class="row align-items-center justify-content-between">
                <div class="col col-md-8 col-lg-3 col-xl-8">
                    {% block search %}{% search_form cl %}{% endblock %}
                </div>
                <div class="d-block mb-4 mb-md-0 col-4 col-md-2">
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group">
                            {% block object-tools-items %}
                                {% change_list_object_tools %}
                            {% endblock %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="row main-footer">
            <div class="{% if cl.has_filters %}col-md-10{% else %}col-md-12{% endif %}">
                {% 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 card-body border-0 shadow table-wrapper table-responsive">
                        {% 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 %}{% pagination cl %}{% endblock %}
                    </div>
                </form>
            </div>
            <div class="col-md-2">
                {% if cl.has_filters %}
                    {% block filters %}
                        <div class="card card-body border-0 shadow table-wrapper table-responsive">
                            <div class="card-header filter_card_header">
                                <h5>{% trans 'Filter' %}</h5>
                            </div>
                            <div class="card-body">
                                {% for spec in cl.filter_specs %}
                                    {% admin_list_filter cl spec %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endblock %}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}
