{% extends "admin/base.html" %}
{% load dash_tags %}
{% load i18n admin_urls static admin_modify %}

{% block extrahead %}
    {{ block.super }}
    <script src="{% url 'admin:jsi18n' %}"></script>
    {{ media }}
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <style>
        .form-hero {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
            background: linear-gradient(135deg, var(--color-base-100) 0%, var(--color-base-200) 55%, var(--color-base-300) 100%);
        }
        .form-hero::before {
            content: "";
            position: absolute;
            inset: -35% auto auto -15%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 25%, transparent), transparent 70%);
            filter: blur(12px);
            pointer-events: none;
        }
        .form-hero::after {
            content: "";
            position: absolute;
            inset: auto -20% -60% auto;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-accent) 25%, transparent), transparent 70%);
            filter: blur(18px);
            pointer-events: none;
        }
        .submit-sidebar-sticky {
            position: sticky;
            top: 5rem;
            align-self: start;
        }
        @media (max-width: 1535px) {
            .submit-sidebar-sticky {
                position: static;
            }
        }
        .mobile-save-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 50;
            background: color-mix(in oklab, var(--color-base-100) 85%, transparent);
            backdrop-filter: blur(16px);
            border-top: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            padding: 0.75rem 1rem;
            display: none;
        }
        @media (max-width: 767px) {
            .mobile-save-bar {
                display: flex;
            }
            body {
                padding-bottom: 4.5rem;
            }
        }
    </style>
{% endblock %}

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

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="text-sm breadcrumbs">
            <ul>
                <li><a href="{% url 'admin:index' %}" class="link link-hover">{% trans 'Dashboard' %}</a></li>
                {% if has_view_permission %}
                    <li><a class="link link-hover" href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a></li>
                {% else %}
                    <li><a class="disabled" href="#">{{ opts.verbose_name_plural|capfirst }}</a></li>
                {% endif %}
                <li>{% if add %}{% blocktranslate with name=opts.verbose_name %}Add {{ name }}{% endblocktranslate %}{% else %}{{ original|truncatechars:40 }}{% endif %}</li>
            </ul>
        </div>
    {% endblock %}
{% endif %}

{% block content %}
    <section class="form-hero p-6 md:p-8 mt-2 mb-5">
        <div class="relative z-10 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div class="space-y-2">
                <p class="text-xs uppercase tracking-[0.3em] text-base-content/60">
                    <i class="fa-solid fa-circle text-[6px] text-primary me-1"></i>
                    {% if add %}{% trans "New record" %}{% else %}{% trans "Editing" %}{% endif %}
                </p>
                <h1 class="text-3xl font-semibold md:text-4xl tracking-tight">
                    {{ opts.verbose_name|capfirst }}
                </h1>
                <p class="text-sm text-base-content/70 flex items-center gap-1">
                    <i class="fa-solid fa-folder-open text-base-content/40"></i>
                    {{ opts.app_config.verbose_name }}
                </p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                {% if change and not is_popup %}
                    {% change_form_object_tools %}
                {% endif %}
                <a class="btn btn-ghost btn-sm gap-2" href="{% url opts|admin_urlname:'changelist' %}">
                    <i class="fa-solid fa-arrow-left"></i>
                    {% trans "Back to list" %}
                </a>
            </div>
        </div>
    </section>

    <div id="content-main">
        <form
                {% if has_file_field %}enctype="multipart/form-data" {% endif %}
                {% if form_url %}action="{{ form_url }}"{% else %} action="{{ request.path }}" {% endif %}
                method="post"
                id="{{ opts.model_name }}_form"
                class="w-full pb-16 md:pb-0">

            {% csrf_token %}
            {% block form_top %}{% endblock %}

            <div class="grid grid-cols-1 2xl:grid-cols-4 gap-5">
                {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1">{% endif %}
                {% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">{% endif %}

                {% if save_on_top %}
                    {% block submit_buttons_top %}
                        <div class="col-span-full flex justify-end gap-2">
                            {% submit_row %}
                        </div>
                    {% endblock %}
                {% endif %}

                <div class="w-full col-span-1 2xl:col-span-3 space-y-5">
                    {% if errors %}
                        <div class="alert alert-error rounded-xl shadow-lg" role="alert">
                            <div class="flex items-start gap-3">
                                <i class="fa-solid fa-circle-exclamation mt-0.5"></i>
                                <div>
                                    <p class="font-semibold text-sm">
                                        <i class="fa fa-exclamation me-1"></i>
                                        {% blocktranslate count counter=errors|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
                                    </p>
                                    {% if adminform.form.non_field_errors %}
                                        <ul class="mt-2 space-y-1 text-sm list-disc list-inside">
                                            {% for error in adminform.form.non_field_errors %}
                                                <li>{{ error }}</li>
                                            {% endfor %}
                                        </ul>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <div role="tablist" class="w-full tabs tabs-lift">
                        {% block field_sets %}
                            {% for fieldset in adminform %}
                                {% if forloop.first and not fieldset.name %}
                                    <a role="tab" class="tab tab-active tab-lg gap-2">
                                        <i class="fa-solid fa-layer-group text-base-content/40 text-xs"></i>
                                        {{ opts.verbose_name }}
                                        {% with total_errors=adminform.form|sum_errors %}
                                            {% if total_errors > 0 %}
                                                <span class="badge badge-error badge-xs">{{ total_errors }}</span>
                                            {% endif %}
                                        {% endwith %}
                                    </a>
                                {% elif forloop.first %}
                                    <a role="tab" class="tab tab-active tab-lg gap-2">
                                        <i class="fa-solid fa-layer-group text-base-content/40 text-xs"></i>
                                        {{ fieldset.name }}
                                        {% with total_errors=adminform.form|sum_errors %}
                                            {% if total_errors > 0 %}
                                                <span class="badge badge-error badge-xs">{{ total_errors }}</span>
                                            {% endif %}
                                        {% endwith %}
                                    </a>
                                {% endif %}
                            {% endfor %}

                            <div role="tabpanel" class="tab-content p-5 glass-panel-strong rounded-b-2xl border-t-0">
                                {% for fieldset in adminform %}
                                    {% if 'navtab' not in fieldset.classes %}
                                        <fieldset class="mb-5 border border-base-content/5 rounded-xl overflow-hidden bg-base-100/30 last:mb-0">
                                            {% if fieldset.name %}
                                                <div class="px-5 py-3 border-b border-base-content/5 bg-base-200/30">
                                                    <h3 class="font-semibold text-sm text-base-content/70 flex items-center gap-2">
                                                        <i class="fa-solid fa-table-cells text-base-content/30 text-xs"></i>
                                                        {{ fieldset.name }}
                                                    </h3>
                                                </div>
                                            {% endif %}
                                            <div class="p-5">
                                                {% include "admin/includes/fieldset.html" %}
                                            </div>
                                        </fieldset>
                                    {% endif %}
                                {% endfor %}

                                {% for inline_admin_formset in inline_admin_formsets %}
                                    {% if not inline_admin_formset.opts.is_navtab %}
                                        <div class="border border-base-content/5 rounded-xl overflow-hidden bg-base-100/30 mb-5 last:mb-0">
                                            {% include inline_admin_formset.opts.template %}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>

                            {% for fieldset in adminform %}
                                {% if 'navtab' in fieldset.classes %}
                                    <a role="tab" class="tab tab-lg gap-2">
                                        <i class="fa-solid fa-table-cells text-base-content/40 text-xs"></i>
                                        {{ fieldset.name|default:opts.verbose_name }}
                                        {% with total_errors=adminform.form|sum_errors %}
                                            {% if total_errors > 0 %}
                                                <span class="badge badge-error badge-xs">{{ total_errors }}</span>
                                            {% endif %}
                                        {% endwith %}
                                    </a>
                                    <fieldset role="tabpanel"
                                              class="mb-3 tab-content p-5 glass-panel-strong rounded-b-2xl border-t-0">
                                        {% include "admin/includes/fieldset.html" %}
                                    </fieldset>
                                {% endif %}
                            {% endfor %}
                        {% endblock %}

                        {% block after_field_sets %}{% endblock %}

                        {% block inline_field_sets %}
                            {% for inline_admin_formset in inline_admin_formsets %}
                                {% if inline_admin_formset.opts.is_navtab %}
                                    <a role="tab" class="tab tab-lg gap-2">
                                        <i class="fa-solid fa-paperclip text-base-content/40 text-xs"></i>
                                        {{ inline_admin_formset.opts.verbose_name_plural }}
                                        {% with total_errors=inline_admin_formset|sum_errors %}
                                            {% if total_errors > 0 %}
                                                <span class="badge badge-error badge-xs indicator-item">{{ total_errors }}</span>
                                            {% endif %}
                                        {% endwith %}
                                    </a>
                                    <fieldset role="tabpanel"
                                              class="mb-3 tab-content p-5 glass-panel-strong rounded-b-2xl border-t-0">
                                        {% include inline_admin_formset.opts.template %}
                                    </fieldset>
                                {% endif %}
                            {% endfor %}
                        {% endblock %}
                    </div>

                    {% block after_related_objects %}{% endblock %}
                </div>

                {% block submit_buttons_bottom %}
                    <div class="submit-sidebar-sticky space-y-4">
                        <div class="glass-panel-strong rounded-2xl overflow-hidden">
                            <div class="px-4 py-3 border-b border-base-content/5">
                                <p class="text-[10px] font-semibold uppercase tracking-[0.2em] text-base-content/40">{% trans "Actions" %}</p>
                            </div>
                            {% submit_row %}
                        </div>
                        {% if original and not is_popup %}
                            <div class="glass-panel-strong rounded-2xl p-4 max-2xl:hidden">
                                {% include "admin/includes/object_history_summary.html" %}
                            </div>
                        {% endif %}
                    </div>
                {% endblock %}
            </div>
        </form>
    </div>

    <div class="mobile-save-bar">
        <div class="flex w-full justify-between items-center gap-3">
            {% if show_delete_link and original %}
                {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %}
                <a href="{% add_preserved_filters delete_url %}" class="btn btn-ghost btn-sm btn-square text-error">
                    <i class="fa-solid fa-trash-can"></i>
                </a>
            {% endif %}
            <div class="flex-1"></div>
            {% if show_save %}
                <button type="submit" class="btn btn-primary btn-sm" name="_save" form="{{ opts.model_name }}_form">
                    <i class="fa-solid fa-save me-1"></i>
                    {% translate 'Save' %}
                </button>
            {% endif %}
            <details class="dropdown dropdown-top dropdown-end">
                <summary class="btn btn-ghost btn-sm btn-square">
                    <i class="fa-solid fa-ellipsis-vertical"></i>
                </summary>
                <div class="dropdown-content min-w-44 rounded-xl glass-panel-strong p-2 shadow-xl mt-1">
                    {% if show_save_and_continue %}
                        <button class="btn btn-ghost btn-sm btn-block justify-start" type="submit" name="_continue" form="{{ opts.model_name }}_form">
                            <i class="fa-solid fa-pen"></i>
                            {% if can_change %}{% translate 'Save and continue editing' %}{% else %}{% translate 'Save and view' %}{% endif %}
                        </button>
                    {% endif %}
                    {% if show_save_and_add_another %}
                        <button class="btn btn-ghost btn-sm btn-block justify-start" type="submit" name="_addanother" form="{{ opts.model_name }}_form">
                            <i class="fa-solid fa-plus"></i>
                            {% translate 'Save and add another' %}
                        </button>
                    {% endif %}
                    {% if show_save_as_new %}
                        <button class="btn btn-ghost btn-sm btn-block justify-start" type="submit" name="_saveasnew" form="{{ opts.model_name }}_form">
                            <i class="fa-solid fa-copy"></i>
                            {% translate 'Save as new' %}
                        </button>
                    {% endif %}
                </div>
            </details>
        </div>
    </div>

    {% block admin_change_form_document_ready %}
        <script id="django-admin-form-add-constants"
                src="{% static 'admin/js/change_form.js' %}"
                {% if adminform and add %}
                data-model-name="{{ opts.model_name }}"
                {% endif %}
                async>
        </script>
        <script>
            $(document).ready(function () {
                $('.tab').each(function (index) {
                    $(this).on('click', function () {
                        $('.tab').removeClass('tab-active');
                        $('.tab-content').addClass('hidden');
                        $(this).addClass('tab-active');
                        $('.tab-content').eq(index).removeClass('hidden');
                    });
                });
            });
        </script>
        {% prepopulated_fields_js %}
    {% endblock %}
{% endblock %}