@page "/marquee"
@inject IStringLocalizer<Marquees> Localizer

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

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

<DemoBlock Title="@Localizer["MarqueeBase"]" Introduction="@Localizer["MarqueeBaseIntro"]" Name="Normal">
    <section ignore>
        <h4>Options</h4>
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel class="label-width" DisplayText="Direction" />
            <RadioList @bind-Value="@Direction" />
        </BootstrapInputGroup>
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel class="label-width" DisplayText="Duration" />
            <span class="input-group-text" style="width:48px">@Duration</span>
            <Slider @bind-Value="@Duration" Step="1" Min="15" Max="30" />
        </BootstrapInputGroup>
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel class="label-width" DisplayText="FontSize" />
            <span class="input-group-text" style="width:48px">@FontSize</span>
            <Slider @bind-Value="@FontSize" Step="1" Min="20" Max="72" />
        </BootstrapInputGroup>
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel class="label-width" DisplayText="Text" />
            <BootstrapInput TValue="string" @bind-Value="@Text" />
        </BootstrapInputGroup>
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel class="label-width" DisplayText="TextColor" />
            <ColorPicker @bind-Value="@TextColor" />
        </BootstrapInputGroup>
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel class="label-width" DisplayText="BackgroundColor" />
            <ColorPicker @bind-Value="@BackgroundColor" />
        </BootstrapInputGroup>
    </section>

    <Marquee Text="@Text" Color="@TextColor" BackgroundColor="@BackgroundColor"
             Duration="@Duration" Direction="@Direction" FontSize="@FontSize" />
</DemoBlock>
