{% comment %}
Confirm-action button that opens a dignified modal instead of a native confirm().

Required args:
  trigger_label  — text shown on the trigger button (e.g. "Approve")
  action_url     — form POST action
  title          — modal heading (e.g. "Approve amendment?")

Optional args:
  trigger_class  — Tailwind classes for the trigger button (default: btn-secondary btn-sm)
  eyebrow        — small eyebrow above title
  lede           — supporting copy under title
  hidden_inputs  — dict of {name: value} rendered as <input type="hidden">
  confirm_label  — text on the final confirm button (default: reuse trigger_label)
  confirm_class  — Tailwind classes for the confirm button (default: btn-primary)
  note           — small grey footnote inside modal footer (left-aligned)
  danger         — truthy → red accent on modal header
  reason_field   — if truthy, include a required textarea named "reason"
  reason_label   — label text for the reason textarea
  reason_placeholder — placeholder text

Usage:
  {% include "components/confirm_button.html" with
       trigger_label="Approve"
       trigger_class="btn-primary btn-sm"
       action_url=approve_url
       title="Approve amendment "|add:amendment.amendment_number|stringformat:"s"
       lede="This applies the new terms to the award record and cannot be undone."
       hidden_inputs=hidden
       confirm_label="Approve amendment"
  %}
{% endcomment %}
<div x-data="{ open: false, reason: '' }" class="inline-flex">
  <button type="button" @click="open = true" class="{{ trigger_class|default:'btn-secondary btn-sm' }}">
    {{ trigger_label }}
  </button>
  <div x-show="open" x-cloak class="modal-overlay"
       @click.self="open = false"
       @keydown.escape.window="open = false"
       role="dialog" aria-modal="true" aria-labelledby="confirm-title-{{ forloop.counter0|default:0 }}">
    <div class="modal-panel modal-panel--narrow{% if danger %} modal-panel--danger{% endif %}"
         x-init="$nextTick(() => { $el.querySelector('textarea,button[type=submit]')?.focus() })">
      <div class="modal-head">
        <div>
          {% if eyebrow %}<p class="modal-head__eyebrow">{{ eyebrow }}</p>{% endif %}
          <h3 class="modal-head__title">{{ title }}</h3>
          {% if lede %}<p class="modal-head__lede">{{ lede }}</p>{% endif %}
        </div>
        <button type="button" @click="open = false" class="modal-close" aria-label="Close">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
      <form method="post" action="{{ action_url }}">
        {% csrf_token %}
        {% for name, value in hidden_inputs.items %}<input type="hidden" name="{{ name }}" value="{{ value }}">{% endfor %}
        {% if reason_field %}
        <div class="modal-body">
          <label class="field-label" for="confirm-reason-{{ forloop.counter0|default:0 }}">
            {{ reason_label|default:"Reason" }} <span class="text-red-600">*</span>
          </label>
          <textarea id="confirm-reason-{{ forloop.counter0|default:0 }}"
                    name="reason"
                    required
                    rows="3"
                    x-model="reason"
                    placeholder="{{ reason_placeholder|default:'Explain the decision for the audit trail…' }}"></textarea>
        </div>
        {% endif %}
        <div class="modal-foot{% if note %} modal-foot--between{% endif %}">
          {% if note %}<p class="modal-foot__note">{{ note }}</p>{% endif %}
          <div class="flex items-center gap-3">
            <button type="button" @click="open = false" class="btn-secondary">Cancel</button>
            <button type="submit"
                    class="{{ confirm_class|default:'btn-primary' }}"
                    {% if reason_field %}:disabled="!reason.trim()"{% endif %}>
              {{ confirm_label|default:trigger_label }}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>