@page "/camera"
@inject IStringLocalizer<Cameras> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<p><b>@Localizer["Attention"]</b></p>

<ul class="ul-demo">
    <li>@((MarkupString)Localizer["Li1"].Value)</li>
</ul>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <section ignore>
        <p>@Localizer["BasicUsageStep"]</p>
        <ul class="ul-demo mb-3">
            <li>@Localizer["BasicUsageLi1"]</li>
            <li>@Localizer["BasicUsageLi2"]</li>
            <li>@Localizer["BasicUsageLi3"]</li>
        </ul>
    </section>
    <Camera @ref="Camera" OnInit="@OnInit" OnOpen="@OnOpen" OnClose="@OnClose" OnError="@OnError" DeviceId="@DeviceId" />
    <section ignore>
        <Select Items="@Devices" @bind-Value="@DeviceId" DisplayText="@DeviceLabel" ShowLabel="true" PlaceHolder="@PlaceHolderString"></Select>
        @if (ImageUrl != null)
        {
            <img src="@ImageUrl" class="mt-3" />
        }
        <div class="btn-group mt-3">
            <Button Text="@PlayText" Color="Color.Success" Icon="fa-solid fa-play" IsDisabled="PlayDisabled" OnClick="OnClickOpen"></Button>
            <Button Text="@StopText" Color="Color.Danger" Icon="fa-solid fa-stop" IsDisabled="StopDisabled" OnClick="OnClickClose"></Button>
            <Button Text="@PreviewText" Color="Color.Info" Icon="fa-solid fa-camera" IsDisabled="CaptureDisabled" OnClick="OnClickPreview"></Button>
            <Button Text="@SaveText" Color="Color.Info" Icon="fa-solid fa-camera" IsDisabled="CaptureDisabled" OnClick="OnClickSave"></Button>
        </div>

        <div class="mt-3">
            <Button Text="QVGA" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(320, 240)"></Button>
            <Button Text="VGA" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(640, 380)"></Button>
            <Button Text="HD" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(1280, 720)"></Button>
            <Button Text="Full HD" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(1920, 1080)"></Button>
            <Button Text="Television 4K (3840 * 2160)" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(3840, 2160)"></Button>
            <Button Text="Cinema 4K (4096 * 2160)" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(4096, 2160)"></Button>
            <Button Text="8K" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(7680, 4320)"></Button>
        </div>
        <ConsoleLogger @ref="Logger" />
        <div class="mt-3">
            <img style="@ImageStyleString" src="@ImageContentData" />
        </div>
    </section>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
