{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Scanner Center{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/scanner_center.css">
{% endblock %}
{% block content %}
<div class="wrap">
    <section class="hero card">
        <h1>Scanner Center</h1>
        <p>Connect a phone with Bluetooth support, use the phone camera as a live scanner, or plug in a real USB barcode scanner. All options are available for cashier and admin workstations.</p>
        <div class="actions">
            <a href="{{ target }}" class="btn">Open Sales Target</a>
            {{ ui.button('Barcode Hub', '/barcode') }}
            {{ ui.button('Scan Intelligence', '/barcode/intelligence') }}
            {{ ui.button('Training Mode', '/barcode/training') }}
        </div>
        <div class="bottom-left-back">
            <a href="{{ return_to }}" class="btn">Back</a>
        </div>
    </section>

    <section class="grid">
        <div class="card">
            <h2>Phone via Bluetooth or Live Link</h2>
            <p>Open the phone connector page, pair if Bluetooth is supported, or use the generated phone link for reliable live scanning.</p>
            <div class="actions">
                <a href="/connect-phone-scanner?return_to={{ return_to }}&target={{ target }}" class="btn">Connect Phone Scanner</a>
            </div>
        </div>

        <div class="card">
            <h2>Real Barcode Scanner</h2>
            <p>Use a USB or HID barcode scanner that types directly into the barcode field. Most retail scanners work instantly once plugged in.</p>
            <div class="actions">
                <a href="/scan?return_to={{ return_to }}&target={{ target }}" class="btn">Open Hardware Scanner Page</a>
            </div>
            <ul>
                <li>Plug the scanner into the computer or pair it as a keyboard-style device.</li>
                <li>Place the cursor in the barcode input box.</li>
                <li>Scan and the product will open in the sales screen.</li>
            </ul>
        </div>

        <div class="card">
            <h2>Phone Camera on This Device</h2>
            <p>If the workstation has a camera, you can scan directly in the browser without pairing another device.</p>
            <div class="actions">
                <a href="/mobile-scan?return_to={{ return_to }}&target={{ target }}" class="btn">Open Camera Scanner</a>
            </div>
        </div>
    </section>
</div>
{% endblock %}