{# PDF detail-view component (#942 cycle 1b).

   Full-bleed PDF viewer with header (back link + title + optional
   prev/next sibling nav), body (browser-native ``<embed>``), and a
   footer with keyboard-shortcut hints.

   The ``data-dz-widget="pdf-viewer"`` attribute is the bridge mount
   point — keyboard handlers (Esc → back, j / ← → prev, k / → →
   next) live in ``static/js/pdf-viewer.js``. NOT co-located with
   ``x-data`` on the wrapper; the widget contract from #940 stays
   intact. Bridge ↔ Alpine separation: chrome state is data-driven,
   handler is global.

   ## Required parameters

   - ``src`` — proxy URL for the PDF, typically
     ``/api/storage/<storage>/proxy?key=<s3_key>`` (cycle 1a, #942).
   - ``back_url`` — where Esc / the back button navigates to.

   ## Optional parameters

   - ``title`` — header title (defaults to "Document").
   - ``prev_url`` / ``next_url`` — sibling URLs for j/k keyboard
     nav. When unset, the keys are ignored. Projects derive these
     from their own scope rules (the framework can't generically
     know what "the next manuscript" means).

   ## Why ``<embed>`` and not PDF.js?

   Browser-native PDF rendering ships in every modern browser
   today. PDF.js (~250kb) buys cross-browser consistency for chrome
   like zoom + page count, but the chrome already lives inside the
   embedded viewer. v1 keeps the framework footprint tight; if a
   project reports a real cross-browser inconsistency we'll vendor
   PDF.js as a follow-up cycle.
#}
<div
  class="dz-pdf-viewer"
  data-dz-widget="pdf-viewer"
  data-dz-back-url="{{ back_url }}"
  {% if prev_url %}data-dz-prev-url="{{ prev_url }}"{% endif %}
  {% if next_url %}data-dz-next-url="{{ next_url }}"{% endif %}
>
  <header class="dz-pdf-viewer-header">
    <a
      href="{{ back_url }}"
      class="dz-pdf-viewer-back"
      aria-label="Back"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path d="m12 19-7-7 7-7"></path>
        <path d="M19 12H5"></path>
      </svg>
      <span class="dz-pdf-viewer-back-label">Back</span>
    </a>
    <h1 class="dz-pdf-viewer-title">{{ title | default("Document") }}</h1>
    {% if prev_url or next_url %}
    <nav class="dz-pdf-viewer-nav" aria-label="Sibling navigation">
      <a
        href="{{ prev_url or '#' }}"
        class="dz-pdf-viewer-nav-link"
        {% if not prev_url %}aria-disabled="true" tabindex="-1"{% endif %}
        aria-label="Previous"
      >
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path d="m15 18-6-6 6-6"></path>
        </svg>
      </a>
      <a
        href="{{ next_url or '#' }}"
        class="dz-pdf-viewer-nav-link"
        {% if not next_url %}aria-disabled="true" tabindex="-1"{% endif %}
        aria-label="Next"
      >
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </a>
    </nav>
    {% endif %}
  </header>

  <div class="dz-pdf-viewer-body">
    <embed
      src="{{ src }}"
      type="application/pdf"
      class="dz-pdf-viewer-embed"
      aria-label="{{ title | default('Document') }} PDF"
    />

    {# #942 cycle 2a / #943 cycle 5a — optional right-side panels.
       Project renders the content into a string per panel and
       passes them via ``panels=[{name, label, key, html}, …]``;
       the framework wraps each in chrome and wires the toggle.
       CSS-only show/hide via the adjacent-sibling combinator so
       the wrapper stays free of x-data (preserves the widget
       contract from #940). Project HTML is trusted ({{ ... | safe }}) —
       the project renders its own templates with autoescape, then
       passes the resulting HTML in as a string.

       Backwards compat: cycle 2a's ``panel_html`` + ``panel_label``
       still work — they're normalised to a one-element ``panels``
       list with the conventional ``p`` key so cycle 2a adopters
       see no behaviour change. #}
    {% if panels %}
      {% set _panels = panels %}
    {% elif panel_html %}
      {% set _panels = [{'name': 'panel', 'label': panel_label or 'Related', 'key': 'p', 'html': panel_html}] %}
    {% else %}
      {% set _panels = [] %}
    {% endif %}
    {% for panel in _panels %}
    <input
      type="checkbox"
      id="dz-panel-toggle-{{ panel.name }}"
      class="dz-pdf-viewer-panel-toggle"
      data-dz-panel-name="{{ panel.name }}"
      data-dz-panel-key="{{ panel.key }}"
      aria-label="Toggle {{ panel.label }}"
    />
    <aside
      class="dz-pdf-viewer-panel"
      data-dz-panel="{{ panel.name }}"
      role="complementary"
      aria-label="{{ panel.label }}"
    >
      <header class="dz-pdf-viewer-panel-header">
        <h2 class="dz-pdf-viewer-panel-title">
          {{ panel.label }}
        </h2>
        {# Close button — `<button>` (not `<label for>`) so it's
           tabbable and receives keyboard focus correctly when the
           panel opens. The bridge handler (#942 cycle 2b) intercepts
           clicks on this button and flips the toggle. The
           `data-dz-panel-close` hook lets the JS find the button
           without coupling to the cosmetic class name. #}
        <button
          type="button"
          class="dz-pdf-viewer-panel-close"
          data-dz-panel-close
          aria-label="Close {{ panel.label }} panel"
        >
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </header>
      <div class="dz-pdf-viewer-panel-body">
        {{ panel.html | safe }}
      </div>
    </aside>
    {% endfor %}
  </div>

  <footer class="dz-pdf-viewer-footer" aria-label="Keyboard shortcuts">
    {# #944 cycle 6a — optional footer slot for project-specific
       controls (page counter, zoom buttons, panel toggle pills,
       custom action buttons). Renders before the keyboard legend.
       Project HTML is trusted ({{ ... | safe }}) — projects render
       their own templates with autoescape, then pass the resulting
       HTML in as a string. Same trust contract as cycle 2a's
       ``panel_html``. #}
    {% if footer_slot_html %}
    <div class="dz-pdf-viewer-footer-slot">{{ footer_slot_html | safe }}</div>
    {% endif %}
    {# ``show_kbd_legend`` defaults to true; pass false explicitly to
       hide the cycle 1b legend (e.g. when the slot already
       advertises every binding). #}
    {% if show_kbd_legend is not defined or show_kbd_legend %}
    <kbd class="dz-pdf-viewer-kbd">Esc</kbd>
    <span class="dz-pdf-viewer-kbd-label">Back</span>
    {% if prev_url or next_url %}
    <span class="dz-pdf-viewer-kbd-sep">·</span>
    <kbd class="dz-pdf-viewer-kbd">j</kbd>
    <span class="dz-pdf-viewer-kbd-label">Previous</span>
    <kbd class="dz-pdf-viewer-kbd">k</kbd>
    <span class="dz-pdf-viewer-kbd-label">Next</span>
    {% endif %}
    {% for panel in _panels %}
    <span class="dz-pdf-viewer-kbd-sep">·</span>
    <kbd class="dz-pdf-viewer-kbd">{{ panel.key }}</kbd>
    <span class="dz-pdf-viewer-kbd-label">{{ panel.label }}</span>
    {% endfor %}
    <span class="dz-pdf-viewer-kbd-sep">·</span>
    <kbd class="dz-pdf-viewer-kbd">?</kbd>
    <span class="dz-pdf-viewer-kbd-label">Help</span>
    {% endif %}
  </footer>

  {# #943 cycle 5c — keyboard cheat-sheet overlay. Auto-renders from
     the chrome bindings and the panel declarations so projects don't
     have to hand-roll a help modal. ``?`` opens; Esc closes (the
     bridge handler in pdf-viewer.js dispatches Esc → cheat-sheet
     close → panel close → back-nav, in that priority order). The
     dialog is a `<dialog>` element so focus management + backdrop
     come for free; the bridge calls .showModal() / .close() rather
     than toggling a CSS class so the browser's accessibility tree
     reflects the modal state correctly. #}
  <dialog
    class="dz-pdf-viewer-help"
    data-dz-help-overlay
    aria-labelledby="dz-pdf-viewer-help-title"
  >
    <header class="dz-pdf-viewer-help-header">
      <h2 id="dz-pdf-viewer-help-title" class="dz-pdf-viewer-help-title">
        Keyboard shortcuts
      </h2>
      <button
        type="button"
        class="dz-pdf-viewer-help-close"
        data-dz-help-close
        aria-label="Close shortcuts"
      >
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </header>
    <dl class="dz-pdf-viewer-help-list">
      <div class="dz-pdf-viewer-help-row">
        <dt><kbd>Esc</kbd></dt>
        <dd>Back (or close this overlay first)</dd>
      </div>
      {% if prev_url or next_url %}
      <div class="dz-pdf-viewer-help-row">
        <dt><kbd>j</kbd> / <kbd>&larr;</kbd></dt>
        <dd>Previous</dd>
      </div>
      <div class="dz-pdf-viewer-help-row">
        <dt><kbd>k</kbd> / <kbd>&rarr;</kbd></dt>
        <dd>Next</dd>
      </div>
      {% endif %}
      {% for panel in _panels %}
      <div class="dz-pdf-viewer-help-row">
        <dt><kbd>{{ panel.key }}</kbd></dt>
        <dd>Toggle {{ panel.label }}</dd>
      </div>
      {% endfor %}
      <div class="dz-pdf-viewer-help-row">
        <dt><kbd>?</kbd></dt>
        <dd>Show this overlay</dd>
      </div>
    </dl>
  </dialog>
</div>