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

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

{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 text-xs text-on-surface-variant/70 mb-4">
    <a href="{% url 'admin:index' %}" class="hover:text-primary transition-colors flex items-center"><span class="material-symbols-outlined text-[16px]">home</span></a>
    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
    <a href="{% url 'admin:app_list' app_label=opts.app_label %}" class="hover:text-primary transition-colors capitalize font-medium">{{ opts.app_label }}</a>
    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
    <a href="{% url opts|admin_urlname:'changelist' %}" class="hover:text-primary transition-colors font-bold">{{ opts.verbose_name_plural|capfirst }}</a>
    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
    <span class="text-primary font-bold">{% translate 'Delete' %}</span>
</nav>
{% endblock %}

{% block content %}
<div class="space-y-6 max-w-2xl mx-auto w-full border border-outline-variant bg-surface-lowest p-8 rounded-xl shadow-md my-8">
    <!-- Danger Icon & Warning title -->
    <div class="text-center space-y-3">
        <div class="inline-flex items-center justify-center p-4 bg-danger/10 text-danger rounded-full">
            <span class="material-symbols-outlined text-4xl">warning</span>
        </div>
        <h2 class="text-xl md:text-2xl font-black text-on-surface">{% translate 'Confirm Deletion' %}</h2>
        <p class="text-xs text-on-surface-variant max-w-md mx-auto">
            {% blocktranslate with name=opts.verbose_name obj=object %}Are you sure you want to delete the {{ name }} "<strong>{{ obj }}</strong>"? All of the following objects and their related items will be deleted permanently.{% endblocktranslate %}
        </p>
    </div>

    <!-- Related deletions list -->
    <div class="bg-surface-low border border-outline-variant p-4 rounded-lg space-y-2 max-h-[300px] overflow-y-auto custom-scrollbar">
        <h3 class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">{% translate 'Objects to be deleted:' %}</h3>
        <div class="text-xs text-on-surface-variant space-y-1 font-mono pl-2 border-l-2 border-danger/40">
            {{ deleted_objects|safe }}
        </div>
    </div>

    <!-- Confirmation form -->
    <form method="post" class="flex flex-col sm:flex-row items-center justify-center gap-3 pt-4 border-t border-outline-variant">
        {% csrf_token %}
        <input type="hidden" name="post" value="yes"/>
        {% if is_popup %}<input type="hidden" name="_popup" value="1"/>{% endif %}
        
        <button type="submit" class="w-full sm:w-auto px-6 py-2.5 bg-danger text-white rounded-lg text-xs font-bold hover:bg-danger/95 shadow-md active:scale-[0.98] transition-all">
            {% translate "Yes, I’m sure" %}
        </button>
        
        <a href="{% if cancel_url %}{{ cancel_url }}{% else %}../{% endif %}" 
           class="w-full sm:w-auto px-6 py-2.5 bg-surface-lowest border border-outline-variant text-on-surface-variant hover:bg-surface-low text-center rounded-lg text-xs font-bold shadow-sm transition-all">
            {% translate "No, take me back" %}
        </a>
    </form>
</div>
{% endblock %}