{% extends "base.html" %}
{% set active_nav = "intake" %}

{% block title %}Scan & Match - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Scan & Match</h1>
        <p class="page-subtitle">Scan kits, shipments, and Bloom-linked materials</p>
    </div>
    <div class="flex gap-sm">
        <a href="/intake/print" class="btn btn-secondary">🖨️ Print Labels</a>
        <a href="/intake/exceptions" class="btn btn-secondary">View Exceptions ({{ exception_count or 0 }})</a>
    </div>
</div>

<div class="card mb-lg">
    <h3 class="mb-md">Scan Barcode</h3>
    <form hx-post="/intake/scan" hx-target="#scanResult" hx-swap="innerHTML" class="scan-input-container">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="text" name="barcode" class="form-input scan-input" 
               placeholder="Scan or enter barcode..." 
               autofocus autocomplete="off" id="barcodeInput">
        <button type="submit" class="btn btn-primary btn-lg">
            <span class="htmx-indicator">⏳</span>
            <span>Scan</span>
        </button>
    </form>
</div>

<div id="scanResult">
    {% if scan_result %}
    {% include "intake/_scan_result.html" %}
    {% else %}
    <div class="card">
        <div class="empty-state">
            <div class="empty-state-icon">🔍</div>
            <p>Scan a barcode to begin</p>
            <p class="text-sm text-muted mt-sm">Supported: TestKit barcodes, Shipment tracking numbers, Bloom-linked material barcodes</p>
        </div>
    </div>
    {% endif %}
</div>

<script>
// Auto-focus barcode input after scan
document.body.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.detail.target.id === 'scanResult') {
        document.getElementById('barcodeInput').value = '';
        document.getElementById('barcodeInput').focus();
    }
});
</script>
{% endblock %}