@page "/reg-new-device"

<div class="text-center">
    <span class="fs-2 fw-bold">QR-Scan USER LOGIN</span>
</div>


<div class="d-flex justify-content-center w-100">
    <button class="btn btn-sm btn-info fw-bold w-100" @onclick="()=>ToggleCodeScan()"><i class="fa-solid fa-qrcode"></i> &nbsp; Scan</button>
</div>

@if (ShowScanBarcode)
{

    <BarcodeReader @ref="barcodeReaderCustom"
                   ScanResult="(e) => ScanDoneHandler(e)"
                   Close="ToggleCodeScan"
                   ScanBtnTitle="Scan"
                   ResetBtnTitle="Reset"
                   CloseBtnTitle="Close"
                   UseBuiltinDiv="false"
                   SelectDeviceBtnTitle="Select Device">
    </BarcodeReader>

    <div @ref="barcodeReaderCustom.Element" class="d-flex  justify-content-center">
        <div class="col-12 col-md-8 col-lg-6">
            <button class="btn btn-outline-success p-2 m-1 w-25" data-action="startButton">Scan</button>
            <button class="btn btn-outline-success p-2 m-1 w-25" data-action="resetButton">Reset</button>
            <button class="btn btn-outline-success p-2 m-1 w-25" @onclick="() => ToggleCodeScan()">Close</button>

            <div data-action="sourceSelectPanel" style="display:none">
                <label for="sourceSelect">Source:</label>
                <select data-action="sourceSelect" style="max-width:100%" class="form-control">
                </select>
            </div>
            <div>
                <video id="video" playsinline="true" autoplay="true" class="w-100 h-100 border rounded shadow shadow-lg image-mirror" muted="true"></video>
            </div>
        </div>
    </div>

}

@if (oprList.Count > 0)
{
    <div class="mb-1">
        <span class="fs-5 fw-bold">Selezionare un operatore</span>
        <select class="form-select" @bind="matrOpr">
            @foreach (var opr in oprList)
            {
                <option value="@opr.MatrOpr">@($"{opr.Cognome} {opr.Nome}")</option>
            }
        </select>
    </div>
    <div>
        <span class="fs-5 fw-bold">User Auth Key</span>
        <input type="password" class="form-control" @bind="authKey" />
    </div>
}

<div class="d-flex justify-content-between my-2">
    <div class="pe-2 col-6">
        <button class="btn btn-sm btn-primary w-100" @onclick="()=>FirstLogIn()">Log In</button>
    </div>
    <div class="ps-2 col-6">
        <button class="btn btn-sm btn-warning w-100">Cancel</button>
    </div>
</div>


@if (!string.IsNullOrEmpty(txtError))
{
    <div class="alert alert-danger fs-3">
        @txtError
    </div>
}