{% extends "form_view.html" %}
{% load i18n %}
{% block before_form %}
  {% comment %}
    An alert lays its direct children out as columns, so everything each one
    says goes inside a single element. Splitting a sentence around a <strong>
    puts each fragment in a column of its own and spreads it across the width.
  {% endcomment %}
  {% if is_protected %}
    <c-alert variant="error" only>
      <div>
        <strong>{% trans "This record cannot be deleted." %}</strong>
        <c-mvp.text>
          {% trans "It is referenced by the following records, which must be removed or updated first:" %}
        </c-mvp.text>
        <ul class="list-disc ms-4">
          {% for obj in protected_objects %}<li>{{ obj }}</li>{% endfor %}
        </ul>
      </div>
    </c-alert>
  {% else %}
    <c-alert variant="warning" only>
      <span>
        {% blocktrans %}You are about to <strong>permanently</strong> delete this record. This action cannot be undone.{% endblocktrans %}
      </span>
    </c-alert>
    {% if related_objects %}
      <c-alert :attrs="related_objects_attrs" only>
        <div>
          <strong>{% trans "The following related records will also be permanently deleted:" %}</strong>
          {% for label, objs, overflow in related_objects %}
            <c-mvp.text text="{{ label }}" bold />
            <ul class="list-disc ms-4">
              {% for obj in objs %}<li>{{ obj }}</li>{% endfor %}
            </ul>
            {% if overflow %}
              <c-mvp.text size="sm">
                {% blocktrans %}… and {{ overflow }} more{% endblocktrans %}
              </c-mvp.text>
            {% endif %}
          {% endfor %}
        </div>
      </c-alert>
    {% endif %}
    {% if require_confirmation %}
      {% comment %}
        No input drawn here: it's the form's own bound field inside <form>
        below. A second one here shared its name/id, so typing landed on the
        wrong element and the posted, validated field stayed empty.
      {% endcomment %}
      <c-mvp.text>
        {% blocktrans with val=confirmation_value %}To confirm, type <strong class="font-monospace">{{ val }}</strong> below:{% endblocktrans %}
      </c-mvp.text>
    {% endif %}
  {% endif %}
{% endblock before_form %}
{% block actions %}
  {% if back_url %}
    <c-button text="{% trans "Back" %}"
              href="{{ back_url }}"
              outline
              icon="arrow-left" only />
  {% endif %}
  {% 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="error" only />
    {% else %}
      <c-button text="{% trans "Confirm delete" %}"
                type="submit"
                icon="delete"
                variant="error" only />
    {% 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 %}