{{ define "modal_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Single-modal workflow progression: edit → confirm → complete, with explicit cancel/close paths." "back_url" "/" "back_text" "← Back to catalog") }}

    <section class="panel" id="modal-open-states">
      <div class="panel-head"><h2>Open States</h2></div>
      <div class="button-demo-row">
        <a class="btn btn-primary" href="/patterns/modals?open=edit&stage=edit&sel=1&sel=3#modal-open-states">Open Edit Modal</a>
        <a class="btn btn-secondary" href="/patterns/modals?open=delete&stage=confirm&sel=2#modal-open-states">Open Confirm Modal</a>
        <a class="btn btn-ghost" href="/patterns/modals#modal-open-states">No modal open</a>
      </div>
      <div class="notice">{{ .Message }}</div>
    </section>

    <section class="panel" id="modal-context">
      <div class="panel-head"><h2>Page Context</h2></div>
      <div class="card">
        <div class="row"><h3>Selected items</h3><span class="status status-{{ if .SelectedIDs }}ready{{ else }}review{{ end }}">{{ if .SelectedIDs }}{{ len .SelectedIDs }} selected{{ else }}none{{ end }}</span></div>
        <p class="meta">{{ if .SelectedIDs }}IDs: {{ range $i, $id := .SelectedIDs }}{{ if $i }}, {{ end }}{{ $id }}{{ end }}{{ else }}Select rows on the controls page to carry context into modal demos.{{ end }}</p>
      </div>
    </section>

    {{ if .Open }}
    <div class="demo-modal-backdrop">
      <section class="demo-modal">
        <div class="demo-modal-titlebar">
          <a class="demo-modal-close-dot" href="/patterns/modals#modal-open-states" aria-label="Close modal"></a>
          <div class="demo-modal-title">{{ if eq .Open "delete" }}Confirm Destructive Action{{ else }}Edit Items{{ end }}</div>
        </div>
        <div class="demo-modal-body">
        <p class="meta">{{ .Message }}</p>

        {{ if eq .Stage "edit" }}
        <div class="modal-grid">
          <label>Display name <input type="text" value="Example group change"></label>
          <label>Status after action
            <select>
              <option>ready</option>
              <option selected>review</option>
              <option>warning</option>
            </select>
          </label>
          <label class="checkbox-row"><input type="checkbox" checked> Apply to all selected items</label>
          <label class="checkbox-row"><input type="checkbox"> Clear optional field values</label>
        </div>
        <div class="button-demo-row">
          <a class="btn btn-secondary" href="/patterns/modals#modal-open-states">Cancel</a>
          <a class="btn btn-primary" href="/patterns/modals?open={{ .Open }}&stage=confirm{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Review Changes</a>
        </div>
        {{ else if eq .Stage "confirm" }}
        <div class="card">
          <h3 style="margin:0;">Confirmation Summary</h3>
          <ul>
            <li>Selected rows are listed and reviewed before submit.</li>
            <li>Destructive actions require explicit confirmation wording.</li>
            <li>No nested modals; stay within one modal state machine.</li>
          </ul>
        </div>
        <div class="button-demo-row">
          <a class="btn btn-secondary" href="/patterns/modals?open={{ .Open }}&stage=edit{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Back</a>
          <a class="btn {{ if eq .Open "delete" }}btn-danger{{ else }}btn-primary{{ end }}" href="/patterns/modals?open={{ .Open }}&stage=done{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Confirm</a>
        </div>
        {{ else }}
        <div class="notice success">Action completed. Show human-readable summary and next actions.</div>
        <div class="button-demo-row">
          <a class="btn btn-primary" href="/patterns/modals#modal-open-states">Done</a>
        </div>
        {{ end }}
        </div>
      </section>
    </div>
    {{ end }}
{{ template "demo_doc_end" . }}
{{ end }}