@page "/radio"
@inject IStringLocalizer<Radios> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

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

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

<DemoBlock Title="@Localizer["RadiosNormalTitle"]"
           Introduction="@Localizer["RadiosNormalIntro"]"
           Name="Normal">
    <RadioList TValue="string" Items="@DemoValues" OnSelectedChanged="@OnSelectedChanged" />
    <ConsoleLogger @ref="Logger" />
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosAutoSelectFirstWhenValueIsNullTitle"]"
           Introduction="@Localizer["RadiosAutoSelectFirstWhenValueIsNullIntro"]"
           Name="AutoSelectFirstWhenValueIsNull">
    <RadioList TValue="string" Items="@AutoSelectValues" AutoSelectFirstWhenValueIsNull="false" />
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosDisableTitle"]"
           Introduction='@Localizer["RadiosDisableIntro"]'
           Name="Disable">
    <RadioList TValue="string" Items="@DisableValues" IsDisabled="true" ShowBorder="false" />
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosLabelTitle"]"
           Introduction="@Localizer["RadiosLabelIntro"]"
           Name="Label">
    <RadioList TValue="string" Items="@DemoValues" ShowLabel="true" DisplayText="@Localizer["RadiosLabelText"]"></RadioList>
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosBindingTitle"]"
           Introduction="@Localizer["RadiosBindingIntro"]"
           Name="Binding">
    <div class="row g-3">
        <div class="col-12">
            <RadioList Items="@Items" @bind-Value="@BindRadioItem" OnSelectedChanged="@OnItemChanged"></RadioList>
        </div>
        <div class="col-12">
            Text: @BindRadioItem.Text Value: @BindRadioItem.Value
        </div>
    </div>
    <ConsoleLogger @ref="BindLogger" />
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosVerticalTitle"]"
           Introduction="@Localizer["RadiosVerticalIntro"]"
           Name="Vertical">
    <RadioList TValue="string" Items="@DemoValues" IsVertical="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosEnumTitle"]"
           Introduction="@Localizer["RadiosEnumIntro"]"
           Name="Enum">
    <RadioList @bind-Value="@SelectedEnumItem" />
    <p class="mt-2">@SelectedEnumItem</p>
    <p>@((MarkupString)Localizer["RadiosEnumDescription"].Value)</p>
    <RadioList @bind-Value="@SelectedEnumItem2" IsAutoAddNullItem="true" NullItemText="@Localizer["RadiosEnumText"]" />
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosItemTemplateTitle"]"
           Introduction="@Localizer["RadiosItemTemplateIntro"]"
           Name="ItemTemplate">
    <RadioList TValue="string" Items="@IconDemoValues" IsVertical="true">
        <ItemTemplate>
            @if (context is IconSelectedItem item)
            {
                <i class="@item.Icon"></i>
                <span>@item.Text</span>
            }
        </ItemTemplate>
    </RadioList>
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosColorTitle"]"
           Introduction="@Localizer["RadiosColorIntro"]"
           Name="Color">
    <div class="row g-3">
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Primary"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Success"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Danger"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Info"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Warning"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Secondary"></RadioList>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["RadiosIsButtonTitle"]"
           Introduction="@Localizer["RadiosIsButtonIntro"]"
           Name="IsButton">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem3"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem3" IsDisabled="true" Color="Color.Danger"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem3" Color="Color.Success" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem3" Color="Color.Info" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
    </div>

    <ValidateForm Model="Model" class="mt-3">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <RadioList @bind-Value="@Model.Complete" IsButton="true" Items="FooItems" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["RadioListGenericTitle"]" Introduction="@Localizer["RadioListGenericIntro"]" Name="Generic">
    <RadioListGeneric @bind-Value="@_selectedFoo" Items="@GenericItems" />
    <section ignore>
        <div>@_selectedFoo.Name</div>
    </section>
</DemoBlock>

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

<EventTable Items="@GetEvents()" />

