{% load i18n brickwork_icons brickwork_components %}
{% comment %}
Modal dialog (04-interfaces section 4b). Consumed by EXTENDING, like
patterns/: a consumer's modal partial opens with
{% extends "brickwork/components/_modal.html" %} and fills the named blocks.

DUAL CONSUMPTION, one partial, two documented render paths (BR-BW-HTMX-001):
  1. htmx path (needs the #bw-modal-root container shell/base.html ships
     from 0.9.0): the trigger is a real anchor carrying
     hx-get hx-target="#bw-modal-root" hx-swap="innerHTML"; the view
     returns the consumer's modal partial and on insertion bwModal opens
     it as an overlay.
  2. no-JS floor: the SAME anchor's href is a full-page route; the view
     (branching on request.htmx) renders the SAME consumer partial inside
     a full page (typically a page extending shell/centred.html whose
     content block {% include %}s the consumer's modal partial). With no
     JavaScript this markup is simply an in-flow, visible panel on that
     page: the modal is then a page, which is the floor. Nothing here is
     display:none at rest; the scrim and fixed overlay positioning apply
     only under the JS-set bw-modal--open state, so the floor never hides
     content behind JavaScript.

Named blocks (semver-public, BR-BW-TPL-001):
  title:        Defaults to rendering {{ title }} inside the chrome-owned
                heading (heading-sm type role). Prefixed modal_title was
                removed in 4.0.0.
  body:         The dialog content. A form inside it follows BR-BW-HTMX-003
                unchanged (hx-target="this" hx-swap="outerHTML", 422
                re-render with inline errors); a failed request NEVER closes
                the modal (CBH-026). On success the view closes it
                server-side: respond 204 (or with OOB toast content) plus
                HX-Trigger: {"bw:modal:close": {"id": "<modal_id>"}};
                bwModal listens for bw:modal:close at the window. Prefixed
                modal_body was removed in 4.0.0.
  footer:       Empty renders nothing; the filler owns the wrapper element
                (write <footer class="bw-modal__footer">...</footer>),
                matching _card.html's region convention. Sticky
                header/footer with a scrolling body per CMP-021. Prefixed
                modal_footer was removed in 4.0.0.

A block name this file does not define is SILENTLY DISCARDED by Django:
no error, no warning, DEBUG=True does not catch it. Filling a removed
prefixed name (modal_title, modal_body, modal_footer) produces a
structurally valid, empty region for that fill.

body and footer stay markup-only by design (icvoss/django-brickwork#398
sweep): body is "the dialog content", commonly a form wired to
BR-BW-HTMX-003, and footer's filler owns its own <footer> wrapper
element, so neither has a single string a context variable could
sensibly stand in for. Passing a body= or footer= context variable is
therefore still silently discarded, correctly. title already accepts a
context variable (see Required context below); that is the one region
here shaped like content rather than markup.

Required context:
  title: the accessible name, rendered as the dialog heading and wired via
         aria-labelledby. A modal with neither title nor an overriding
         title block is a template-authoring defect in the ICO-008
         class (extend-consumed, so this cannot raise at render time).
Optional context:
  size ("sm"|"md"|"lg"|"full", default "md", CMP-020): resolves
         --bw-size-max-width-modal-{sm,md,lg}; full is full-viewport.
  backdrop_dismiss (bool, default True, CBH-003): pass False for
         destructive confirms; bwModal ignores the backdrop route when
         False. Escape ALWAYS closes (CBH-001): a must-confirm flow routes
         Escape through the same confirm branch, never disables it.
  modal_id (str, default "bw-modal"): the instance identity carried in
         bw:modal:open/close event details and matched by the HX-Trigger
         server-close header.
  close_href (str): the no-JS floor's exit for the always-rendered close
         control; when set the control is a real anchor (typically back to
         the page that linked here), so the floor never shows a dead
         trigger (AC-BW-086). With JS running bwModal intercepts it and
         closes in place.

Focus and keyboard (WAI-ARIA APG Dialog (Modal) pattern, wired by bwModal +
the wrapped @alpinejs/focus trap; a consumer never authors x-trap,
BR-BW-JS-003): on open, focus moves into the dialog (the first focusable
element, or [data-bw-autofocus] when present); Tab/Shift+Tab cycle inside
the trap (guaranteed, no opt-out, CBH-002/A11Y-004); Escape closes
unconditionally (CBH-001, a window listener bwModal owns); on close, focus
returns to the trigger on every dismissal route (CBH-004, BR-BW-JS-006).
The close control below is always rendered, visible and keyboard-reachable:
a focus trap without a visible exit is a cage (BR-BW-JS-007). Nested modals
are unsupported (CBH-005): use step state inside the body block. Body scroll
locks while open (the trap's noscroll modifier); the trap's inert modifier
removes the page behind from the accessibility tree, which is what the
static aria-modal="true" below promises once the overlay state engages.

Wiring shape (bwModal's DOM contract; the data-bw-modal-* attributes are
its internal hooks, not consumer surface): bwModal attaches its own
scrim/close/Escape listeners at init (the scrim route honours
backdropDismiss inside close()'s guard, so the template never wires a
bypass), exposes its boolean state as isOpen (04-interfaces names both a
state key "open" and a method open(); one JS object cannot carry both
under one name, so the boolean is isOpen and the methods keep their
documented names; flagged for a spec amendment), and reflects open state
as [data-bw-open] on the root for the CSS overlay/scrim presentation.
There is deliberately NO x-show here: the closed state must stay visible
markup, because on the floor page this partial IS the page content.

Events (optional conventions, BR-BW-HTMX-004): bw:modal:open,
bw:modal:close (detail { id, reason:
"escape"|"backdrop"|"close-button"|"server"|"programmatic" }); listens for
bw:modal:close at the window.

Tokens, elevation, motion (CSS lane): panel at --bw-z-modal over the scrim
at --bw-z-overlay; scrim --bw-color-surface-overlay; panel
--bw-color-surface-raised, --bw-elevation-4, radius --bw-radius-xl;
title heading-sm. Enter: scrim fades, panel scales 96% -> 100% at
--bw-duration-normal/--bw-ease-out (MOT-005); exit reverses at
--bw-duration-fast/--bw-ease-in. Reduced motion: enter and exit render
instantly (BR-BW-TOK-009).

States: closed (the floor: an in-flow, visible page under the no-JS route)
  and open (JS route: [data-bw-open]/.bw-modal--open, overlay positioning
  plus scrim engage only in this state); four size states
  (sm/md/lg/full). The close control is always rendered in both states,
  never conditionally hidden.
Accessibility: WAI-ARIA APG Dialog (Modal) pattern (role="dialog",
  aria-modal="true", aria-labelledby the title). Focus moves into the
  dialog on open (or a [data-bw-autofocus] element), Tab/Shift+Tab cycle
  inside a guaranteed focus trap with no opt-out, Escape always closes, and
  focus returns to the trigger on every dismissal route. Body scroll locks
  while open; the trap's inert modifier removes the page behind from the
  accessibility tree. Covered by axe.spec.mjs against
  interactions-modal-page-*.html (the no-JS floor route) and
  interactions-*.html/interactions-open-*.html (the JS-boot leg); the focus
  trap, every dismissal route (Escape/backdrop/close button) and the
  focus-return contract are driven live by interactions.spec.mjs.
Responsive: no breakpoint switch. Panel width is the fixed size scale
  (sm/md/lg resolve to --bw-size-max-width-modal-*, full is 100vw/100vh),
  not a viewport-driven rule; the panel is fluid down to the viewport width
  at every size below its cap.

Appearance (Beat Phase C, icvoss/django-brickwork#543):
  header_recipe ("plain" default | "muted" | "bordered"): region recipe on
      the sticky header. plain is the authored hairline divider (omit emits
      no extra modifier). muted / bordered match the card header recipe
      grammar.
  footer_recipe ("plain" default | "muted" | "actions"): root modifier so a
      consumer-authored .bw-modal__footer shares the recipe look. The
      footer block still owns its own <footer> wrapper.
{% endcomment %}{% firstof header_recipe '' as header_recipe %}{% firstof footer_recipe '' as footer_recipe %}{% firstof size '' as size %}{% bw_options component="brickwork/components/_modal.html" header_recipe=header_recipe footer_recipe=footer_recipe size=size %}{% firstof modal_id "bw-modal" as bw_modal_instance_id %}
<div class="bw-modal bw-modal--{% firstof size 'md' %}{% if header_recipe and header_recipe != "plain" %} bw-modal--header-{{ header_recipe }}{% endif %}{% if footer_recipe and footer_recipe != "plain" %} bw-modal--footer-{{ footer_recipe }}{% endif %}"
     id="{{ bw_modal_instance_id }}"
     x-data="bwModal({ backdropDismiss: {% if backdrop_dismiss == False %}false{% else %}true{% endif %} })">
  <div class="bw-modal__scrim" data-bw-modal-scrim aria-hidden="true"></div>
  <div class="bw-modal__panel"
       role="dialog"
       aria-modal="true"
       aria-labelledby="{{ bw_modal_instance_id }}-title"
       x-trap.inert.noscroll="isOpen">
    <header class="bw-modal__header{% if header_recipe and header_recipe != "plain" %} bw-modal__header--{{ header_recipe }}{% endif %}">
      <h2 class="bw-modal__title" id="{{ bw_modal_instance_id }}-title">{% block title %}{{ title }}{% endblock %}</h2>
      {% translate "Close" as bw_modal_close_label %}
      {% if close_href %}
        {# The anchor is the floor's real exit; with JS running the x-on   #}
        {# .prevent stops the navigation and closes in place instead. It   #}
        {# deliberately does NOT carry data-bw-modal-close: bwModal's own  #}
        {# listener would close without preventing the navigation.         #}
        <a class="bw-modal__close bw-btn bw-btn--ghost bw-btn--sm bw-btn--icon-only"
           {% bw_attr "href" close_href %}
           aria-label="{{ bw_modal_close_label }}"
           x-on:click.prevent="close('close-button')">
          {% bw_icon "close" size="sm" decorative=True %}
        </a>
      {% else %}
        <button class="bw-modal__close bw-btn bw-btn--ghost bw-btn--sm bw-btn--icon-only"
                type="button"
                aria-label="{{ bw_modal_close_label }}"
                data-bw-modal-close>
          {% bw_icon "close" size="sm" decorative=True %}
        </button>
      {% endif %}
    </header>
    <div class="bw-modal__body">{% block body %}{% endblock %}</div>
    {% block footer %}{% endblock %}
  </div>
</div>