@page "/tutorials/drawing"
@inject MessageService MessageService
@inject DownloadService DownloadService
@inherits WebSiteModuleComponentBase
@attribute [JSModuleAutoLoader("Samples/Tutorials/DrawingApp.razor.js")]

<div>
    <canvas id="@Id" class="drawing-canvas"></canvas>
    <div class="row g-3">
        <div class="col-auto">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="LineThickness" />
                <BootstrapInputNumber Min="1" Max="10" Value="@LineThickness" OnValueChanged="@ChangeSize" />
            </BootstrapInputGroup>
        </div>
        <div class="col-auto">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="DrawingColor" />
                <ColorPicker @bind-value="@DrawingColor" OnValueChanged="@ChangeColor" />
            </BootstrapInputGroup>
        </div>
        <div class="col-auto">
            <Button OnClick="@Undo" Color="Color.Warning">Undo(Ctrl+Z)</Button>
        </div>
        <div class="col-auto">
            <Button OnClick="@Redo" Color="Color.Info">Redo(Ctrl+Y)</Button>
        </div>
        <div class="col-auto">
            <Button OnClick="@ClearCanvas" Color="Color.Danger">ClearCanvas</Button>
        </div>
        <div class="col-auto">
            <Button OnClick="@DownloadImage" Color="Color.Primary">DownloadImage</Button>
        </div>
    </div>
</div>
