@page "/color-picker"
@inject IStringLocalizer<ColorPickers> Localizer

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

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

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <ColorPicker Value="@Value" OnValueChanged="@OnColorChanged" />
    <ConsoleLogger @ref="NormalLogger" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValueTitle"]" Introduction="@Localizer["ValueIntro"]" Name="Value">
    <p>@((MarkupString)Localizer["ValueDescription"].Value)</p>
    <ColorPicker Value="@Value"></ColorPicker>
</DemoBlock>

<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
    <ColorPicker @bind-Value="@Value"></ColorPicker>
    <div class="mt-3">Value: @Value</div>
</DemoBlock>

<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled">
    <ColorPicker Value="@Value" IsDisabled="true"></ColorPicker>
</DemoBlock>

<DemoBlock Title="@Localizer["TemplateTitle"]" Introduction="@Localizer["TemplateIntro"]" Name="Template">
    <ColorPicker Value="@Value">
        <Template>
            <input type="text" class="form-control" readonly value="@FormatValue(context)" />
        </Template>
    </ColorPicker>
</DemoBlock>

<DemoBlock Title="@Localizer["FormatterTitle"]" Introduction="@Localizer["FormatterIntro"]" Name="Formatter">
    <ColorPicker Value="@Value" Formatter="FormatValueAsync"></ColorPicker>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
    <ValidateForm Model="Dummy">
        <div class="row g-3 form-inline">
            <div class="col-6">
                <ColorPicker @bind-Value="@Dummy.Name"></ColorPicker>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["IsSupportOpacityTitle"]" Introduction="@Localizer["IsSupportOpacityIntro"]" Name="IsSupportOpacity">
    <section ignore>
        <div class="row form-inline">
            <div class="col-12 col-sm-6">
                <Switch @bind-Value="_opacityIsSupport" DisplayText="@Localizer["SupportOpacity"]" ShowLabel="true"></Switch>
            </div>
            <div class="col-12 col-sm-6">
                <Switch @bind-Value="_opacityIsDisabled" DisplayText="@Localizer["Disabled"]" ShowLabel="true"></Switch>
            </div>
        </div>
    </section>
    <ColorPicker @bind-Value="@_opacityValue" IsSupportOpacity="_opacityIsSupport" IsDisabled="_opacityIsDisabled"></ColorPicker>
</DemoBlock>

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