{% extends "admin_base.html" %}

{% block page_title %}QR & Barcode Scanner{% endblock %}

{% block extra_head %}
<script src="/static/js/html5-qrcode.min.js"></script>
{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-3xl space-y-4" id="scannerPage">
  <header class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-6">
    <div class="flex items-center gap-3">
      <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-brand/10 text-xl text-brand" aria-hidden="true"><i class="fas fa-qrcode"></i></span>
      <div>
        <h1 class="text-xl font-semibold text-foreground">QR &amp; barcode scanner</h1>
        <p class="mt-1 text-sm text-muted">Scan with your camera or choose an image from this device.</p>
      </div>
    </div>
  </header>

  <div data-scanner-notice class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>

  <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-label="Scanner controls">
    <div id="reader" class="min-h-64 w-full bg-black sm:min-h-80" aria-label="Camera viewfinder"></div>
    <div class="flex items-center gap-2 border-t border-divider px-4 py-3 text-sm text-muted" role="status" aria-live="polite">
      <span class="size-2 shrink-0 rounded-full bg-muted" id="statusDot" aria-hidden="true"></span>
      <span id="statusText">Camera inactive</span>
    </div>

    <div class="flex flex-col flex-wrap justify-center gap-2 border-t border-divider bg-canvas p-4 sm:flex-row sm:items-center sm:p-5">
      <button type="button" id="btnStart" data-scanner-action="start" class="blocks-button blocks-button-primary min-h-11"><i class="fas fa-camera" aria-hidden="true"></i> Start camera</button>
      <button type="button" id="btnStop" data-scanner-action="stop" class="blocks-button blocks-button-secondary min-h-11" hidden><i class="fas fa-stop-circle" aria-hidden="true"></i> Stop camera</button>
      <label for="fileInput" class="blocks-button blocks-button-secondary min-h-11 cursor-pointer"><i class="fas fa-image" aria-hidden="true"></i> Scan image</label>
      <input type="file" id="fileInput" class="sr-only" accept="image/*" aria-label="Choose an image to scan">
    </div>

    <div class="p-4 sm:p-5" id="idleHint">
      <p class="text-center text-sm leading-6 text-muted"><i class="fas fa-qrcode mr-2 text-brand" aria-hidden="true"></i>Point your camera at a QR code or barcode, or choose an image to scan.</p>
    </div>

    <section class="border-t border-divider p-4 sm:p-5" id="resultPanel" aria-labelledby="resultHeading" hidden>
      <h2 id="resultHeading" class="text-xs font-semibold uppercase tracking-wide text-muted">Last scan result</h2>
      <p id="resultText" class="mt-2 min-h-12 break-all rounded-lg border border-divider bg-canvas p-3 font-mono text-sm text-foreground" role="status" aria-live="polite" tabindex="0"></p>
      <div class="mt-3 flex flex-wrap items-center gap-2">
        <button type="button" data-scanner-action="copy" class="blocks-button blocks-button-secondary min-h-10"><i class="fas fa-copy" aria-hidden="true"></i> Copy result</button>
        <button type="button" data-scanner-action="open" class="blocks-button blocks-button-secondary min-h-10"><i class="fas fa-external-link-alt" aria-hidden="true"></i> Open URL</button>
        <span id="formatBadge" class="ml-auto text-xs text-muted"></span>
      </div>
    </section>
  </section>
</main>
{% endblock %}