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

{% block extrastyle %}
    {{ block.super }}
    <style>
        .delete-hero {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            border: 1px solid color-mix(in oklab, var(--color-error) 15%, transparent);
            background: linear-gradient(135deg, color-mix(in oklab, var(--color-error) 4%, var(--color-base-100)) 0%, var(--color-base-200) 100%);
        }
        .delete-hero::before {
            content: "";
            position: absolute;
            inset: -50% auto auto -20%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-error) 20%, transparent), transparent 70%);
            filter: blur(20px);
            pointer-events: none;
        }
    </style>
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation{% endblock %}

{% block breadcrumbs %}
    <div class="text-sm max-sm:hidden 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 %}{{ object|truncatewords:"18" }}{% endif %}</li>
        </ul>
    </div>
{% endblock %}

{% block content %}
    <div class="max-w-3xl mx-auto mt-4 space-y-5">
        {% if perms_lacking or protected %}
            <div class="glass-panel-strong rounded-2xl p-6">
                {% if perms_lacking %}
                    <div class="flex items-start gap-3 mb-4">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-warning/10 text-warning">
                            <i class="fa-solid fa-triangle-exclamation"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base">{% trans "Permission required" %}</h3>
                            <p class="text-sm text-base-content/60 mt-1">
                                {% blocktranslate with escaped_object=object %}Deleting the {{ object_name }} '{{ escaped_object }}' would result in deleting related objects, but your account doesn't have permission to delete the following types of objects:{% endblocktranslate %}
                            </p>
                        </div>
                    </div>
                    <ul class="list list-disc list-inside space-y-1 text-sm text-base-content/70">
                        {% for obj in perms_lacking %}
                            <li>{{ obj }}</li>
                        {% endfor %}
                    </ul>
                {% elif protected %}
                    <div class="flex items-start gap-3 mb-4">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-warning/10 text-warning">
                            <i class="fa-solid fa-shield-halved"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base">{% trans "Protected objects" %}</h3>
                            <p class="text-sm text-base-content/60 mt-1">
                                {% blocktranslate with escaped_object=object %}Deleting the {{ object_name }} '{{ escaped_object }}' would require deleting the following protected related objects:{% endblocktranslate %}
                            </p>
                        </div>
                    </div>
                    <ul class="list list-disc list-inside space-y-1 text-sm text-base-content/70">
                        {% for obj in protected %}
                            <li>{{ obj }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>
        {% else %}
            <div class="delete-hero p-6 md:p-8">
                <div class="relative z-10 flex flex-col gap-2">
                    <div class="flex items-center gap-3">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-error/10 text-error">
                            <i class="fa-solid fa-trash-can text-xl"></i>
                        </div>
                        <div>
                            <p class="text-xs uppercase tracking-[0.3em] text-base-content/50">{% trans "Danger zone" %}</p>
                            <h1 class="text-2xl font-bold tracking-tight">{% trans "Confirm deletion" %}</h1>
                        </div>
                    </div>
                    <p class="text-sm text-base-content/60 mt-2">
                        {% blocktranslate with escaped_object=object %}Are you sure you want to delete the {{ object_name }} '<strong class="text-base-content">{{ escaped_object }}</strong>'? All of the following related items will be deleted:{% endblocktranslate %}
                    </p>
                </div>
            </div>

            <div class="glass-panel-strong rounded-2xl overflow-hidden">
                <div class="p-5 border-b border-base-content/5">
                    <h2 class="font-semibold text-sm flex items-center gap-2">
                        <i class="fa-solid fa-link text-base-content/30 text-xs"></i>
                        {% translate "Related objects" %}
                    </h2>
                </div>
                <div class="p-5">
                    <ul class="list list-disc list-inside space-y-1.5 text-sm text-base-content/70 max-h-64 overflow-y-auto scrollbar-thin">
                        {{ deleted_objects|unordered_list }}
                    </ul>
                </div>
            </div>

            <div class="glass-panel-strong rounded-2xl p-5">
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="post" value="yes">
                    {% 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 %}
                    <div class="flex flex-wrap justify-end gap-3">
                        <a href="#" class="btn btn-ghost gap-2 cancel-link">
                            <i class="fa-solid fa-arrow-left"></i>
                            {% trans "No, take me back" %}
                        </a>
                        <button class="btn btn-error gap-2" type="submit">
                            <i class="fa-solid fa-trash-can"></i>
                            {% translate 'Yes, I’m sure' %}
                        </button>
                    </div>
                </form>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script src="{% static 'admin/js/cancel.js' %}" async></script>
{% endblock %}