{% extends "form_view.html" %}
{% load i18n %}
{% block before_card %}
  {% if next_url %}<input type="hidden" name="next" value="{{ next_url }}" />{% endif %}
  {% if is_protected %}
    {# ===== Scenario 3: Object is PROTECT-blocked - no delete button ===== #}
    <c-alert variant="danger">
      <strong>{% trans "This record cannot be deleted." %}</strong>
      <c-text>
        {% trans "It is referenced by the following records, which must be removed or updated first:" %}
      </c-text>
      <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">
      {% blocktrans %}
      You are about to <strong>permanently</strong> delete this record. This action cannot be undone.
      {% endblocktrans %}
    </c-alert>
    {% if related_objects %}
      {# ===== Scenario 2: Related-objects summary (opt-in) ===== #}
      <c-alert variant="info">
        <strong>{% trans "The following related records will also be permanently deleted:" %}</strong>
        {% for label, objs, overflow in related_objects %}
          <c-text text="{{ label }}" bold />
          <ul class="mb-0">
            {% for obj in objs %}<li>{{ obj }}</li>{% endfor %}
          </ul>
          {% if overflow %}
            <c-text small>
              {% blocktrans %}
              … and {{ overflow }} more
              {% endblocktrans %}
            </c-text>
          {% endif %}
        {% endfor %}
      </c-alert>
    {% endif %}
    {% if require_confirmation %}
      {# ===== Scenario 4: Type-to-confirm input (opt-in) ===== #}
      {% if form.errors.confirmation %}
        <c-alert variant="danger">
          {% for error in form.errors.confirmation %}
            {{ error }}
            {% if not forloop.last %}{% endif %}
          {% endfor %}
        </c-alert>
      {% endif %}
      <c-text>
        {% blocktrans with val=confirmation_value %}To confirm, type <strong class="font-monospace">{{ val }}</strong> below:{% endblocktrans %}
      </c-text>
      <c-form.field id="id_confirmation"
                    type="text"
                    name="confirmation"
                    placeholder="{{ confirmation_label }}"
                    label="{{ confirmation_label }}"
                    autocomplete="off"
                    hide-label
                    only />
    {% endif %}
  {% endif %}
{% endblock before_card %}
{% block actions %}
  <c-button text="{% trans "Back" %}"
            href="{{ back_url }}"
            outline
            icon="arrow-left" />
  {% if not is_protected %}
    {% if require_confirmation %}
      <c-button text="{% trans "Delete" %}"
                id="delete-submit-btn"
                data-confirmation-value="{{ confirmation_value }}"
                disabled
                type="submit"
                icon="delete"
                variant="danger" />
    {% else %}
      <c-button text="{% trans "Confirm 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 %}