{% extends "form_view.html" %}
{% load i18n %}
{% block before_form %}
  <input type="hidden" name="next" value="{{ next_url }}" />
  {% if is_protected %}
    {# ===== Scenario 3: Object is PROTECT-blocked - no delete button ===== #}
    <c-alert variant="danger">
      <strong>{% trans "This record cannot be deleted." %}</strong>
      <p class="mb-1 mt-2">
        {% trans "It is referenced by the following records, which must be removed or updated first:" %}
      </p>
      <ul class="mb-0">
        {% for obj in protected_objects %}<li>{{ obj }}</li>{% endfor %}
      </ul>
    </c-alert>
  {% else %}
    {# ===== Scenarios 1, 2, 4: Object is safe to delete ===== #}
    <c-alert variant="warning">
      {% trans "You are about to" %}
      <strong>{% trans "permanently" %}</strong>
      {% trans "delete this record. This action cannot be undone." %}
    </c-alert>
    {% if related_objects %}
      {# ===== Scenario 2: Related-objects summary (opt-in) ===== #}
      <c-alert variant="info" class="mt-2">
        <strong>{% trans "The following related records will also be permanently deleted:" %}</strong>
        {% for label, objs, overflow in related_objects %}
          <p class="fw-semibold mb-1 mt-2">{{ label }}</p>
          <ul class="mb-0">
            {% for obj in objs %}<li>{{ obj }}</li>{% endfor %}
          </ul>
          {% if overflow %}<p class="text-muted small mb-0">… and {{ overflow }} more</p>{% endif %}
        {% endfor %}
      </c-alert>
    {% endif %}
    {% if require_confirmation %}
      {# ===== Scenario 4: Type-to-confirm input (opt-in) ===== #}
      {% if form.errors.confirmation %}
        <div class="alert alert-danger py-2 mt-2" role="alert">
          {% for error in form.errors.confirmation %}
            {{ error }}
            {% if not forloop.last %}{% endif %}
          {% endfor %}
        </div>
      {% endif %}
      <p class="mb-2 mt-3">
        {% blocktrans with val=confirmation_value %}To confirm, type <strong class="font-monospace">{{ val }}</strong> below:{% endblocktrans %}
      </p>
      <div class="mb-3">
        <label for="id_confirmation"
               class="form-label visually-hidden">{{ confirmation_label }}</label>
        <input type="text"
               id="id_confirmation"
               name="confirmation"
               class="form-control"
               placeholder="{{ confirmation_label }}"
               autocomplete="off"
               aria-label="{{ confirmation_label }}" />
      </div>
    {% endif %}
  {% endif %}
{% endblock before_form %}
{% block actions %}
  <c-button text="{% trans "Go back" %}"
            href="{{ back_url }}"
            icon="arrow-left"
            variant="secondary" />
  {% if not is_protected %}
    {% if require_confirmation %}
      <button type="submit"
              id="delete-submit-btn"
              data-confirmation-value="{{ confirmation_value }}"
              class="btn btn-danger"
              disabled>{% trans "Delete" %}</button>
    {% else %}
      <c-button text="{% trans "Delete" %}"
                type="submit"
                icon="delete"
                variant="danger" />
    {% endif %}
  {% endif %}
{% endblock actions %}
{% block extra_js %}
  {% if require_confirmation %}
    <script>
      (function() {
        'use strict';
        var input = document.getElementById('id_confirmation');
        var btn = document.getElementById('delete-submit-btn');
        if (!input || !btn) return;
        var expected = btn.dataset.confirmationValue;

        function sync() {
          btn.disabled = (input.value !== expected);
        }
        input.addEventListener('input', sync);
        sync();
      }());
    </script>
  {% endif %}
{% endblock extra_js %}