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

{% block extrastyle %}
    {{ block.super }}
    {#    <link rel="stylesheet" type="text/css" href="{% static RA_THEME|add:"/admin/css/changelists.css" %}">#}
    {% if cl.formset %}
        <link rel="stylesheet" type="text/css" href="{% static RA_THEME|add:"/admin/css/forms.css" %}">
    {% endif %}
    {% 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 %}

{% 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' %}">{% trans 'Home' %}</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
        </li>
        <li class="breadcrumb-item">
            {{ cl.opts.verbose_name_plural|capfirst }}
        </li>
    {% endblock %}
{% endif %}

{% block coltype %}flex{% endblock %}

{% block content %}
    <div id="content-main">
        {% block object-tools %}
            <div class="btn-group">
                {% block object-tools-items %}
                    {% ra_change_list_object_tools %}
                {% endblock %}
            </div>
        {% endblock %}
        {% if cl.formset and cl.formset.errors %}
            <p class="errornote">
                {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
            </p>
            {{ cl.formset.non_form_errors }}
        {% endif %}
        <div class="module{% if cl.has_filters %} filtered{% endif %} mt-3" id="changelist">


            {% block filters %}
                {% if cl.has_filters %}
                    <div class="filters-section">
                        <div class="row">
                        <h6>{% trans 'Filters' %}</h6>
                            {% for spec in cl.filter_specs %}{% ra_admin_list_filter cl spec %}{% endfor %}

                        </div>


                    </div>
                {% endif %}
            {% endblock %}
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        {% block date_hierarchy %}{% if cl.date_hierarchy %}{% ra_date_hierarchy cl %}{% endif %}{% endblock %}
                    </div>
                    <div class="card-tools">{% block search %}{% ra_search_form cl %}{% endblock %}</div>
                </div>
                <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 %}{% ra_admin_actions %}{% endif %}
                        {% ra_result_list cl %}
                        {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% ra_admin_actions %}{% endif %}
                    {% endblock %}
                    <div class="card-footer">
                        {% block pagination %}{% ra_pagination cl %}{% endblock %}
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
        $(document).ready(function () {
            $('select.search-filter').on('change', function () {
                // todo this code does not response well to removing filters,
                let filer = $(this).find(':selected').attr('data-filter') || '';
                let url = window.location.href.split('?')[0];
                if (filer !== '') {
                    window.location.href = url + filer
                }
            })
        })
    </script>
{% endblock %}
