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

{% block title %}{% trans "Confirm deletion" %}{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    .delete-confirmation-container {
      background-color: var(--bs-bg-light);
      padding: 2rem 0;
      min-height: calc(100vh - 200px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .delete-confirmation-wrapper {
      max-width: 600px;
      width: 100%;
      padding: 0 1.5rem;
    }

    .delete-confirmation-card {
      background-color: var(--card-bg);
      border: 2px solid #dc3545;
      border-radius: 0.5rem;
      padding: 2rem;
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
      color: var(--bs-body-color);
    }

    .delete-icon {
      font-size: 3rem;
      color: #dc3545;
      text-align: center;
      margin-bottom: 1rem;
    }

    .delete-confirmation-card h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--bs-body-color);
      text-align: center;
      margin-bottom: 1rem;
    }

    .delete-warning {
      background-color: rgba(220, 53, 69, 0.1);
      border-left: 4px solid #dc3545;
      padding: 1rem;
      border-radius: 0.375rem;
      margin-bottom: 1.5rem;
      color: #dc3545;
    }

    body.dark-mode .delete-warning {
      background-color: rgba(220, 53, 69, 0.15);
      color: #ff6b7a;
    }

    .delete-warning strong {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
    }

    .delete-warning p {
      margin: 0.5rem 0;
      font-size: 0.95rem;
    }

    .delete-warning ul {
      margin: 0;
      padding-left: 1.5rem;
      margin-top: 0.5rem;
    }

    .delete-warning li {
      margin-bottom: 0.5rem;
    }

    .object-list {
      background-color: var(--bs-bg-light);
      border: 1px solid var(--card-border);
      border-radius: 0.375rem;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }

    .object-list h3 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--bs-body-color);
      margin: 0 0 1rem 0;
    }

    .object-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .object-list li {
      padding: 0.5rem;
      color: var(--bs-body-color);
      border-top: 1px solid var(--card-border);
    }

    .object-list li:first-child {
      border-top: none !important;
      color: cornflowerblue;
    }

    .object-list li:before {
      content: "✕ ";
      color: #dc3545;
      font-weight: bold;
      margin-right: 0.5rem;
    }

    .confirmation-form {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--card-border);
    }

    .form-actions {
      display: flex;
      gap: 1rem;
      justify-content: space-around;
      flex-wrap: wrap;
      align-items: center;
    }

    .form-actions button,
    .form-actions a {
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      font-size: 0.95rem;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .form-actions .btn-danger {
      background-color: #dc3545;
      color: white;
      border: 1px solid #dc3545;
    }

    .form-actions .btn-danger:hover {
      background-color: #c82333;
      border-color: #bd2130;
      transform: translateY(-1px);
      box-shadow: 0 0.25rem 0.5rem rgba(220, 53, 69, 0.3);
    }

    .form-actions .btn-danger:active {
      transform: translateY(0);
    }

    .form-actions .btn-secondary {
      background-color: var(--input-bg);
      color: var(--bs-body-color);
      border: 1px solid var(--input-border);
    }

    .form-actions .btn-secondary:hover {
      background-color: var(--bs-bg-light);
      border-color: #0d6efd;
      color: #0d6efd;
      transform: translateY(-1px);
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
    }

    .form-actions .btn-secondary:active {
      transform: translateY(0);
    }

    .form-hidden {
      display: none;
    }

    @media (max-width: 600px) {
      .delete-confirmation-wrapper {
        padding: 0 1rem;
      }

      .delete-confirmation-card {
        padding: 1.5rem;
      }

      .form-actions {
        flex-direction: column;
      }

      .form-actions button,
      .form-actions a {
        width: 100%;
        justify-content: center;
      }
    }
  </style>
{% endblock %}

{% block page_title %}
  {% trans "Confirm Deletion" %}
{% endblock %}

{% block content %}
<div class="delete-confirmation-container">
  <div class="delete-confirmation-wrapper">
    <div class="delete-confirmation-card">
      <div class="delete-icon">
        <i class="bi bi-exclamation-triangle"></i>
      </div>

      <h2>{% trans "Confirm Deletion" %}</h2>

      {% if protected_objects %}
        <div class="delete-warning">
          <strong>{% trans "Cannot delete this object because other objects depend on it:" %}</strong>
          {% for related in protected_objects %}
            <div style="margin-top: 1rem;">
              <strong>{{ related.app_label }}.{{ related.model_name }}</strong>
              <ul>
                {% for obj in related.objects %}
                  <li>{{ obj }}</li>
                {% endfor %}
              </ul>
            </div>
          {% endfor %}
        </div>

        <div class="form-actions">
          <a href="{{ back_url }}" class="btn-secondary">
            <i class="bi bi-arrow-left"></i> {% trans "Back" %}
          </a>
        </div>
      {% else %}
        <div class="alert alert-danger mx-0 small p-2">
          <p class="mb-0">{% trans "This action cannot be undone. Please confirm that you want to delete the following" %}  {% trans opts.verbose_name_plural %}: </p>
        </div>

        {% for deletable_object in deletable_objects %}
          <div class="object-list">
            {% if deletable_object %}
              <ul class="small">
                {% for object in deletable_object %}
                  <li class="">{{ forloop.counter }} - {{ object|truncatewords:8 }}</li>
                {% endfor %}
              </ul>
            {% endif %}
          </div>
        {% endfor %}

        <form method="post" id="delete-form" class="confirmation-form">
          {% csrf_token %}
          <input type="hidden" name="post" value="yes">
          {% for obj in queryset %}
          <input type="hidden" name="{{ action_checkbox_name }}" value="{{ obj.pk|unlocalize }}">
          {% endfor %}
          <input type="hidden" name="action" value="delete_selected">

          <div class="form-actions">
          
            <button type="submit" class="btn-danger btn-sm" name="delete-confirm">
              <i class="bi bi-check-circle"></i> {% trans "Confirm Deletion" %}
            </button>

            <a href="{{ back_url }}" class="btn-secondary btn-sm">
              <i class="bi bi-x-circle"></i> {% trans "No, Take me back!" %}
            </a>
          </div>
        </form>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}