{% extends "admin/base_site.html" %}
{% load i18n static jazzmin %}
{% get_jazzmin_ui_tweaks as jazzmin_ui %}
{% comment %}
    Jazzmin-styled replacement for django-constance's admin/constance/change_list.html.
    The context comes from constance.admin.ConstanceAdmin.changelist_view; the
    "Reset to default" links rely on constance's own admin/js/constance.js.
{% endcomment %}

{% block extrastyle %}
    {{ block.super }}
    {{ media.css }}
    <style>
        #jazzmin-constance .item-name { white-space: nowrap; }
        #jazzmin-constance .item-anchor { visibility: hidden; margin-left: .25em; text-decoration: none; }
        #jazzmin-constance .item-name:hover .item-anchor { visibility: visible; }
        #jazzmin-constance .table-responsive { overflow-x: auto; }
        #jazzmin-constance .errorlist { list-style: none; margin: 0 0 .25rem; padding: 0; }
    </style>
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
    {{ media.js }}
    <script type="text/javascript" src="{% static 'admin/js/constance.js' %}"></script>
{% endblock %}

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

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <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=opts.app_label %}">{{ opts.app_config.verbose_name }}</a></li>
        <li class="breadcrumb-item active">{{ opts.verbose_name_plural|capfirst }}</li>
    </ol>
{% endblock %}

{% block content_title %} {{ opts.verbose_name_plural|capfirst }} {% endblock %}

{% block content %}
    <div id="content-main" class="col-12">
        <form id="changelist-form" action="" method="post" enctype="multipart/form-data" novalidate>
            {% csrf_token %}
            {% for field in form.hidden_fields %}{{ field }}{% endfor %}

            {% if form.errors %}
                <div class="alert alert-danger">
                    {% if form.errors|length == 1 %}
                        {% trans "Please correct the error below." %}
                    {% else %}
                        {% trans "Please correct the errors below." %}
                    {% endif %}
                </div>
                {% for error in form.non_field_errors %}
                    <div class="alert alert-danger alert-dismissible">
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        <i class="icon fa fa-ban"></i>{{ error|capfirst }}
                    </div>
                {% endfor %}
                {% for field in form.hidden_fields %}
                    {% for error in field.errors %}
                        <div class="alert alert-danger">{{ field.name }}: {{ error }}</div>
                    {% endfor %}
                {% endfor %}
            {% endif %}

            <div class="row">
                <div class="col-12 col-lg-9" id="jazzmin-constance">
                    {% if fieldsets %}
                        {% for fieldset in fieldsets %}
                            <div class="card mb-3{% if fieldset.collapse %} collapsed-card{% endif %}">
                                <div class="card-header">
                                    <h3 class="card-title">{{ fieldset.title }}</h3>
                                    {% if fieldset.collapse %}
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" aria-label="{% trans 'Toggle' %}">
                                                <i class="fas fa-lg fa-plus"></i>
                                            </button>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="card-body p-0">
                                    {% with config_values=fieldset.config_values %}
                                        {% include "admin/constance/includes/results_list.html" %}
                                    {% endwith %}
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="card mb-3">
                            <div class="card-body p-0">
                                {% include "admin/constance/includes/results_list.html" %}
                            </div>
                        </div>
                    {% endif %}
                </div>

                <div class="col-12 col-lg-3">
                    <div id="jazzy-actions" class="{{ jazzmin_ui.actions_classes }}">
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <input type="submit" name="_save" value="{% trans 'Save' %}" class="btn btn-sm {{ jazzmin_ui.button_classes.success }}">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block extrajs %}
    {{ block.super }}
    <script>
        (function () {
            var root = document.getElementById('jazzmin-constance');
            if (!root) { return; }
            root.querySelectorAll('input, textarea, select').forEach(function (el) {
                var type = (el.getAttribute('type') || '').toLowerCase();
                if (type === 'hidden' || type === 'submit' || type === 'button') { return; }
                if (type === 'checkbox' || type === 'radio') {
                    el.classList.add('form-check-input');
                } else if (el.tagName === 'SELECT') {
                    el.classList.add('form-select');
                } else {
                    el.classList.add('form-control');
                }
            });
        })();
    </script>
{% endblock %}