{% extends "kiosk_base.html" %}
{% from "_partials/brand_glyph.html" import brand_glyph %}
{% block title %}Self-Checkout — {{ library_name() }}{% endblock %}
{% block content %}
<div style="text-align:center; margin-bottom:1.5rem">
  {{ brand_glyph('6rem', label=library_name() ~ ' logo') }}
</div>
<h1 class="kiosk-title">Self-Checkout</h1>
<p class="kiosk-sub">Please scan or enter your library card number to begin.</p>

{% if error %}<p class="error-banner" role="alert">{{ error }}</p>{% endif %}

<form method="post" action="/ui/kiosk/start">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <label for="card-input">Library card number</label>
  <fieldset role="group">
    <input type="text" id="card-input" name="card_number" class="kiosk-card-input"
           autocomplete="off" autofocus required>
    <button type="button" class="outline secondary" data-scan-target="card-input">Scan</button>
  </fieldset>
  <button type="submit" class="kiosk-big-button">Begin</button>
</form>

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

<p class="kiosk-footer"><small>Need help? Please see a librarian at the desk.</small></p>
{% endblock %}

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