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

{% block extrahead %}
    {{ block.super }}
    {{ media }}
    <script src="{% static 'admin/js/cancel.js' %}" async></script>
    <style>
      .haegl-delete-card {
        background: #ffffff;
        border: 1px solid var(--haegl-border, #e2e8f0);
        border-radius: 16px;
        padding: 28px 32px;
        box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
        max-width: 680px;
        margin-top: 12px;
        font-family: var(--haegl-font-body, 'IBM Plex Sans', sans-serif);
      }
      .haegl-delete-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
      }
      .haegl-delete-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #fef2f2;
        color: #dc2626;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .haegl-delete-title {
        font-family: var(--haegl-font-head, 'Space Grotesk', sans-serif);
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
      }
      .haegl-delete-desc {
        color: #64748b;
        font-size: 14px;
        line-height: 1.55;
        margin: 0 0 20px 0;
      }
      .haegl-delete-objects-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 16px 20px;
        margin-bottom: 24px;
      }
      .haegl-delete-objects-box h3 {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #475569;
        margin: 0 0 10px 0;
      }
      .haegl-delete-objects-box ul {
        margin: 0;
        padding-left: 20px;
        color: #0f172a;
        font-size: 13.5px;
        line-height: 1.6;
      }
      .haegl-delete-objects-box ul li {
        margin-bottom: 4px;
      }
      .haegl-delete-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
      }
      .haegl-btn-confirm-delete {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: #dc2626 !important;
        color: #ffffff !important;
        border: 1px solid #dc2626 !important;
        border-radius: 8px !important;
        padding: 10px 22px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        height: auto !important;
        line-height: 1.4 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
      }
      .haegl-btn-confirm-delete:hover {
        background: #b91c1c !important;
        border-color: #b91c1c !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
      }
      .haegl-btn-cancel-delete {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        line-height: 1.4 !important;
        background: #f8fafc !important;
        color: #475569 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        padding: 10px 22px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
      }
      .haegl-btn-cancel-delete:hover {
        background: #ffffff !important;
        color: #0f172a !important;
        border-color: #94a3b8 !important;
        text-decoration: none !important;
      }
    </style>
{% endblock %}

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

{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
&rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
&rsaquo; <a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}">{{ object|truncatewords:"18" }}</a>
&rsaquo; {% translate 'Delete' %}
</div>
{% endblock %}

{% block content %}
<div class="haegl-delete-card">
{% if perms_lacking %}
  <div class="haegl-delete-header">
    <div class="haegl-delete-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
    </div>
    <h1 class="haegl-delete-title">Permission Denied</h1>
  </div>
  <p class="haegl-delete-desc">{% 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 class="haegl-delete-objects-box">
    <ul>{{ perms_lacking|unordered_list }}</ul>
  </div>
  <div class="haegl-delete-actions">
    <a href="#" class="button cancel-link haegl-btn-cancel-delete">{% translate "Back to Safety" %}</a>
  </div>
{% elif protected %}
  <div class="haegl-delete-header">
    <div class="haegl-delete-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
    </div>
    <h1 class="haegl-delete-title">Protected Record</h1>
  </div>
  <p class="haegl-delete-desc">{% blocktranslate with escaped_object=object %}Deleting the {{ object_name }} '{{ escaped_object }}' would require deleting the following protected related objects:{% endblocktranslate %}</p>
  <div class="haegl-delete-objects-box">
    <ul>{{ protected|unordered_list }}</ul>
  </div>
  <div class="haegl-delete-actions">
    <a href="#" class="button cancel-link haegl-btn-cancel-delete">{% translate "Back to Safety" %}</a>
  </div>
{% else %}
  <div class="haegl-delete-header">
    <div class="haegl-delete-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
    </div>
    <h1 class="haegl-delete-title">Confirm Deletion</h1>
  </div>
  <p class="haegl-delete-desc">
    {% blocktranslate with escaped_object=object %}Are you sure you want to delete the {{ object_name }} "<strong>{{ escaped_object }}</strong>"? This action is irreversible.{% endblocktranslate %}
  </p>

  {% include "admin/includes/object_delete_summary.html" %}

  <div class="haegl-delete-objects-box">
    <h3>{% translate "Objects to be deleted" %}</h3>
    <ul id="deleted-objects">{{ deleted_objects|unordered_list }}</ul>
  </div>

  <form method="post">{% csrf_token %}
    <div>
      <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="haegl-delete-actions">
        <button type="submit" class="haegl-btn-confirm-delete">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
          <span>{% translate "Yes, I’m sure" %}</span>
        </button>
        <a href="#" class="button cancel-link haegl-btn-cancel-delete">{% translate "No, take me back" %}</a>
      </div>
    </div>
  </form>
{% endif %}
</div>
{% endblock %}