@page "/light"
@inject IStringLocalizer<Lights> Localizer
@implements IDisposable

<h3>@Localizer["LightsTitle"]</h3>
<h4>@Localizer["LightsDescription"]</h4>

<DemoBlock Title="@Localizer["LightsNormalTitle"]" Introduction="@Localizer["LightsNormalIntro"]" Name="Normal">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark"></Light>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["LightsFlashingTitle"]" Introduction="@Localizer["LightsFlashingIntro"]" Name="Flashing">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark" IsFlash="true"></Light>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["LightsColorTitle"]" Introduction="@Localizer["LightsColorIntro"]" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlash="true" Color="@Color"></Light>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["LightsTooltipTextTitle"]" Introduction="@Localizer["LightsTooltipTextIntro"]" Name="TooltipText">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto align-self-center">
            <Light Color="Color.Danger" TooltipText="@Title"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Button Text="Remove Tooltip" OnClick="OnRemoveTitle"></Button>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Button Text="Set Tooltip" OnClick="OnSetTitle"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["LightsFlatTitle"]" Introduction="@Localizer["LightsFlatIntro"]" Name="Flat">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary" IsFlat="true" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary" IsFlat="true" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark" IsFlat="true" IsFlash="true"></Light>
        </div>
    </div>
    <div class="row g-3 light-sm">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark" IsFlat="true"></Light>
        </div>
    </div>
    <div class="row g-3 light-xs">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary" IsFlat="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark" IsFlat="true"></Light>
        </div>
    </div>
</DemoBlock>

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