{# The heading names the button group through aria-labelledby; its id is
   unique because only one prompt renders at a time.  The pictures are hidden
   from assistive technology because their captions already say what they
   show.  flip_note promises only what an unanswered flip does. #}
<div class="flip-prompt">
  <p id="flip-heading"><strong>{{ flip_heading }}</strong></p>
  <p>
    Keep the pages in the same order, then flip the stack over the long edge
    (the left or right side, not the top or bottom).
  </p>
  <p>Place the flipped stack back in the feeder, then press Continue.</p>

  <div class="flip-illustration">
    <div>
      <svg viewBox="0 0 120 100" aria-hidden="true" focusable="false">
        <rect x="10" y="20" width="50" height="70" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
        <rect x="14" y="16" width="50" height="70" rx="2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 2"/>
        <path d="M 64 55 C 90 55, 90 35, 64 35" fill="none" stroke="currentColor" stroke-width="2"/>
        <polygon points="64,31 64,39 58,35" fill="currentColor"/>
        <path d="M 95 75 L 102 82 L 115 65" fill="none" stroke="currentColor" stroke-width="3"/>
      </svg>
      <p><small>Long edge (correct)</small></p>
    </div>

    <div>
      <svg viewBox="0 0 120 100" aria-hidden="true" focusable="false">
        <rect x="10" y="20" width="50" height="70" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
        <rect x="14" y="16" width="50" height="70" rx="2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 2"/>
        <path d="M 35 16 C 35 -5, 55 -5, 55 16" fill="none" stroke="currentColor" stroke-width="2"/>
        <polygon points="51,16 59,16 55,10" fill="currentColor"/>
        <line x1="92" y1="65" x2="115" y2="85" stroke="currentColor" stroke-width="3"/>
        <line x1="115" y1="65" x2="92" y2="85" stroke="currentColor" stroke-width="3"/>
      </svg>
      <p><small>Short edge (incorrect)</small></p>
    </div>
  </div>

  {# hx-confirm sits on the button, never on the scan form: it is inherited,
     so there it would make every request in the form confirm.  The question
     makes no promise about the pages already scanned.  Both buttons carry
     fixed ids so htmx can restore focus after each swap.  Continue's autofocus
     moves focus only once, because an unchanged poll is answered 204; the
     full page leaves it off (page_render). #}
  <div role="group" aria-labelledby="flip-heading">
    <button id="flip-continue"{% if not page_render %} autofocus{% endif %} hx-post="/api/flip/continue" hx-vals='{{ {"job_id": job.id} | tojson }}' hx-target="#status-area" hx-swap="outerHTML">Continue</button>
    <button id="flip-abort"
            hx-post="/api/flip/abort"
            hx-vals='{{ {"job_id": job.id} | tojson }}'
            hx-target="#status-area"
            hx-swap="outerHTML"
            hx-confirm="Abort this scan? It will stop and cannot be resumed."
            class="secondary">Abort scan</button>
  </div>
  <small class="prompt-note">{{ flip_note }}</small>
</div>