{% extends "base.html" %}
{% block title %}Circulation Desk — {{ library_name() }}{% endblock %}
{% block content %}
<h2>Circulation Desk</h2>
<div class="grid circ-grid">

  <article>
    <header><strong>Check Out</strong></header>
    <form class="circ-form" hx-post="/ui/circ/checkout" hx-target="#circ-result" hx-swap="innerHTML" hx-include="[name='csrf_token']" hx-indicator="#circ-ind"
          hx-on::before-request="document.getElementById('circ-result').innerHTML=''"
          hx-on::after-request="document.getElementById('co-barcode').focus()">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label for="co-barcode">Item barcode</label>
      <fieldset role="group">
        <input type="text" id="co-barcode" name="barcode" placeholder="Scan or type" autocomplete="off" autofocus>
        <button type="button" class="outline secondary" data-scan-target="co-barcode">Scan</button>
      </fieldset>
      <label for="co-card">Patron card #</label>
      <fieldset role="group">
        <input type="text" id="co-card" name="card_number" placeholder="Library card #" autocomplete="off">
        <button type="button" class="outline secondary" data-scan-target="co-card">Scan</button>
      </fieldset>
      <button type="submit">Check Out</button>
    </form>
  </article>

  <article>
    <header><strong>Check In</strong></header>
    <form class="circ-form" hx-post="/ui/circ/checkin" hx-target="#circ-result" hx-swap="innerHTML" hx-include="[name='csrf_token']" hx-indicator="#circ-ind"
          hx-on::before-request="document.getElementById('circ-result').innerHTML=''"
          hx-on::after-request="document.getElementById('ci-barcode').focus()">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label for="ci-barcode">Item barcode</label>
      <fieldset role="group">
        <input type="text" id="ci-barcode" name="barcode" placeholder="Scan or type" autocomplete="off">
        <button type="button" class="outline secondary" data-scan-target="ci-barcode">Scan</button>
      </fieldset>
      <button type="submit">Check In</button>
    </form>
  </article>

  <article>
    <header><strong>Renew</strong></header>
    <form class="circ-form" hx-post="/ui/circ/renew" hx-target="#circ-result" hx-swap="innerHTML" hx-include="[name='csrf_token']" hx-indicator="#circ-ind"
          hx-on::before-request="document.getElementById('circ-result').innerHTML=''"
          hx-on::after-request="document.getElementById('rn-barcode').focus()">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label for="rn-barcode">Item barcode</label>
      <fieldset role="group">
        <input type="text" id="rn-barcode" name="barcode" placeholder="Scan or type" autocomplete="off">
        <button type="button" class="outline secondary" data-scan-target="rn-barcode">Scan</button>
      </fieldset>
      <label for="rn-card">Patron card #</label>
      <fieldset role="group">
        <input type="text" id="rn-card" name="card_number" placeholder="Library card #" autocomplete="off">
        <button type="button" class="outline secondary" data-scan-target="rn-card">Scan</button>
      </fieldset>
      <button type="submit">Renew</button>
    </form>
  </article>

</div>

<span id="circ-ind" class="htmx-indicator" aria-label="Processing…" style="font-size:1.5rem; display:none; margin:0.5rem 0"></span>
<div id="circ-result"></div>

{% include "_partials/scanner_dialog.html" %}
{% endblock %}

{% block scripts %}
{% include "_partials/scanner_scripts.html" %}
{% endblock %}