@{
    ViewData["Title"] = "Scan a barcode";
}

<h1>Scan a barcode</h1>

<div id="scan-unsupported" class="alert alert-warning d-none" role="alert">
    Live camera scanning isn't supported in this browser. Enter the barcode manually below.
</div>

<div id="scan-camera-container" class="mb-3 d-none">
    <video id="scan-video" class="w-100" autoplay playsinline muted></video>
</div>

<button id="scan-start" type="button" class="btn btn-primary mb-3">Start camera</button>

<form id="scan-manual-form" class="row g-2">
    <div class="col-9">
        <label for="manual-barcode" class="visually-hidden">Barcode</label>
        <input type="text" id="manual-barcode" class="form-control" placeholder="Or enter a barcode" inputmode="numeric" />
    </div>
    <div class="col-3">
        <button type="submit" class="btn btn-outline-secondary w-100">Look up</button>
    </div>
</form>

<div id="scan-result" class="mt-3" aria-live="polite"></div>

@section Scripts {
    <script src="~/js/pages/scan.js" asp-append-version="true"></script>
}
