{% 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);
        }

        .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);
        }
    </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="#">{{ cl.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">
                    {% if add %}{% trans "New record" %}{% else %}{% trans "Editing" %}{% endif %}
                </p>
                <h1 class="text-3xl font-semibold md:text-4xl">
                    {{ opts.verbose_name|capfirst }}
                </h1>
                <p class="text-sm text-base-content/70">
                    {{ 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" href="{% url opts|admin_urlname:'changelist' %}">
                    <i class="fa-solid fa-arrow-left-long"></i>
                    {% trans "Back to list" %}
                </a>
            </div>
        </div>
    </section>

    <div id="content-main" class="border-base-200 mt-3">
        <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 h-full pb-24 md:pb-0">

            {% csrf_token %}
            {% block form_top %}

            {% endblock %}
            <div class="grid grid-cols-1 2xl:grid-cols-4 gap-3 auto-rows-auto">
                {% 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="justify-end space-x-2">
                            {% submit_row %}
                        </div>
                    {% endblock %}
                {% endif %}

                <div class="w-full col-span-1 2xl:col-span-3">
                    {% if errors %}
                        <div class="alert alert-error mb-5 rounded" role="alert">
                            <div>
                                <p class="errornote">
                                    <i class="fa fa-exclamation"></i>
                                    {% blocktranslate count counter=errors|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
                                </p>
                                <ul class="menu">
                                    {% for error in adminform.form.non_field_errors %}
                                        <li class="text-sm">{{ error }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    {% endif %}
                    <div role="tablist" class="w-full items-start tabs tabs-lift overflow-visible ">
                        {% block field_sets %}
                            <a class="indicator tab tab-active">
                                {{ adminform.fieldsets.0.0|default:opts.verbose_name }}
                                <i class="text-base-info opacity-50 fa mx-1 {% get_app_icon adminform.model_admin opts.app_config %} p-1 rounded"></i>
                                {% with total_errors=adminform.form|sum_errors %}
                                    {% if total_errors > 0 %}
                                        <span class="indicator-item indicator-bottom indicator-center badge badge-error  badge-sm">{{ total_errors }}</span>
                                    {% endif %}
                                {% endwith %}
                            </a>

                            <div role="tabpanel" class="tab-content">
                                {% for fieldset in adminform %}
                                    {% if 'navtab' not in fieldset.classes %}
                                        <fieldset
                                                style="outline: none !important;"
                                                class="mb-3 ltr:!rounded-tl-none rtl:!rounded-tr-none w-full !overflow-auto collapse-arrow collapse fieldset bg-base-100 p-1">
                                            <input type="checkbox" name="fieldsets-5" checked="checked"/>
                                            <div class="collapse-title text-xl font-medium">
                                                {{ fieldset.name|default:opts.verbose_name }}
                                            </div>
                                            <div class="mb-3 collapse-content w-full max-w-screen-lg">
                                                {% 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 %}
                                        <fieldset
                                                class="mb-3 overflow-hidden collapse-arrow fieldset bg-base-100 p-1">
                                            <div class="overflow-x-auto overflow-y-visible">
                                                {% include inline_admin_formset.opts.template %}
                                            </div>
                                        </fieldset>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            {% for fieldset in adminform %}
                                {% if 'navtab' in fieldset.classes %}
                                    <a class="indicator tab">
                                        {{ fieldset.name|default:opts.verbose_name }}
                                        <i class="text-base-info opacity-50 fa mx-1 {% get_app_icon adminform.model_admin opts.app_config %} p-1 rounded"></i>
                                        {% with total_errors=adminform.form|sum_errors %}
                                            {% if total_errors > 0 %}
                                                <span class="indicator-item indicator-bottom indicator-center badge badge-error  badge-sm">{{ total_errors }}</span>
                                            {% endif %}
                                        {% endwith %}
                                    </a>
                                    <fieldset
                                            class="mb-3 tab-content ltr:!rounded-tl-none rtl:!rounded-tr-none  w-full collapse-arrow collapse overflow-visible fieldset bg-base-100 p-1">
                                        <input type="checkbox" name="fieldset-navtab-{{ forloop.counter }}" checked/>
                                        <div class="collapse-title text-xl font-medium">
                                            {{ fieldset.name|default:opts.verbose_name }}
                                        </div>
                                        <div class="mb-3 w-full p-3 max-w-screen-lg collapse-content">
                                            {% include "admin/includes/fieldset.html" %}
                                        </div>
                                    </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 class="indicator tab">
                                        {{ inline_admin_formset.opts.verbose_name_plural }}
                                        <i class="text-base-info  opacity-50 fa mx-1 {{ inline_admin_formset.opts.icon }} p-1 rounded"></i>

                                        {% with total_errors=inline_admin_formset|sum_errors %}
                                            {% if total_errors > 0 %}
                                                <span class="badge badge-error  badge-sm indicator-item indicator-bottom indicator-center">{{ total_errors }}</span>
                                            {% endif %}
                                        {% endwith %}
                                    </a>
                                    <fieldset role="tabpanel"
                                              class="mb-3 tab-content overflow-hidden collapse-arrow fieldset bg-base-100 p-1">
                                        <div class="p-3 overflow-x-auto overflow-y-visible">
                                            {% include inline_admin_formset.opts.template %}
                                        </div>
                                    </fieldset>
                                {% endif %}
                            {% endfor %}
                        {% endblock %}

                    </div>
                    {% block after_related_objects %}{% endblock %}
                </div>
                {% block submit_buttons_bottom %}
                    <div class="lg:col-span-1 lg:sticky lg:top-20 self-start space-y-3">
                        <div class="w-full z-20 rounded-2xl border border-base-200 bg-base-100 shadow-lg">
                            {% submit_row %}
                        </div>
                        <div class="max-2xl:hidden rounded-2xl border border-base-200 bg-base-100 shadow-lg">
                            {% if original and not is_popup %}
                                {% include "admin/includes/object_history_summary.html" %}
                            {% endif %}
                        </div>
                    </div>
                {% endblock %}
            </div>
        </form>
    </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 () {
                        // Remove 'tab-active' from all tabs
                        $('.tab').removeClass('tab-active');
                        // Hide all tab content
                        $('.tab-content').addClass('hidden');
                        // Add 'tab-active' to the clicked tab
                        $(this).addClass('tab-active');
                        // Show the corresponding tab content
                        $('.tab-content').eq(index).removeClass('hidden');
                    });
                });
            });
        </script>
        {# JavaScript for prepopulated fields #}
        {% prepopulated_fields_js %}
    {% endblock %}
{% endblock %}