@page "/datetime-range"
@inject IStringLocalizer<DateTimeRanges> Localizer

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

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

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <DateTimeRange @bind-Value="@NormalDateTimeRangeValue" OnConfirm="OnNormalConfirm" ShowSidebar="true" ViewMode="DatePickerViewMode.Year" IsEditable="true" DateFormat="yyyy">
        <TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />
    </DateTimeRange>
    <ConsoleLogger @ref="NormalLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
    <section ignore>
        <div class="mb-3">
            <Pre>dotnet add package BootstrapBlazor.Holiday</Pre>
        </div>
        <div class="mb-3">
            <Pre>builder.Services.AddBootstrapHolidayService();</Pre>
        </div>
        <GroupBox Title="@Localizer["Feature"]">
            <div class="row g-3 form-inline text-end">
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowLunar"]" ShowLabel="true" @bind-Value="_showLunar" />
                </div>
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowSolarTerm"]" ShowLabel="true" @bind-Value="_showSolarTerm" />
                </div>
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowFestivals"]" ShowLabel="true" @bind-Value="_showFestivals" />
                </div>
                <div class="col-12 col-sm-3">
                    <Switch DisplayText="@Localizer["FeatureShowHolidays"]" ShowLabel="true" @bind-Value="_showHolidays" />
                </div>
            </div>
        </GroupBox>
    </section>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@BindValueDemoDateTimeRangeValue" OnValueChanged="v => BindValueDemoOnValueChanged(v, 1)"
                           ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm"
                           ShowFestivals="_showFestivals" ShowHolidays="_showHolidays"
                           ShowSelectedValue="true" AutoClose="true"></DateTimeRange>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["Limit"]" />
                <Display TValue="string" Value="@BindValueDemoRange" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MaxMinValueTitle"]" Introduction="@Localizer["MaxMinValueIntro"]" Name="MaxMinValue">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@MaxMinDateTimeRangeValue"
                           OnValueChanged="v => MaxMinOnValueChanged(v, 2)"
                           MinValue="DateTime.Today.AddDays(-7)"
                           MaxValue="DateTime.Today.AddDays(7)" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["Limit"]" />
                <Display TValue="string" Value="@MaxMinRange" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange Value="@DisabledDateTimeRangeValue" IsDisabled="@IsDisabled" />
        </div>
        <div class="col-12 col-sm-6">
            <Switch @bind-Value="@IsDisabled" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["SidebarTitle"]" Introduction="@Localizer["SidebarIntro"]" Name="Sidebar">
    <section ignore class="mb-3">@((MarkupString)Localizer["SidebarTip"].Value)</section>
    <DateTimeRange Value="@SidebarDateTimeRangeValue" ShowSidebar="true"></DateTimeRange>
</DemoBlock>

<DemoBlock Title="@Localizer["TodayTitle"]" Introduction="@Localizer["TodayIntro"]" Name="Today">
    <section ignore class="mb-3">@((MarkupString)Localizer["TodayTip"].Value)</section>
    <DateTimeRange Value="@TodayDateTimeRangeValue" ShowToday="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["SingleViewTitle"]" Introduction="@Localizer["SingleViewTitle"]" Name="SingleView">
    <section ignore class="mb-3">@((MarkupString)Localizer["SingleViewTitle"].Value)</section>
    <DateTimeRange Value="@TodayDateTimeRangeValue" RenderMode="DateTimeRangeRenderMode.Single" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
    <FormInlineSwitch @bind-Value="@ValidateFormRowType" class="mb-2" />

    <ValidateForm Model="@ValidateFormModel">
        <div class="@ValidateFormClassString">
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@ValidateFormModel.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimeRange @bind-Value="@ValidateFormModel.Range" />
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="@Localizer["Submit"]"></Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["AutoCloseTitle"]" Introduction="@Localizer["AutoCloseIntro"]" Name="AutoClose">
    <DateTimeRange Value="@AutoCloseDateTimeRangeValue" ShowSidebar="true" AutoCloseClickSideBar="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@YearRangeValue" ViewMode="DatePickerViewMode.Year" DateFormat="yyyy">
            </DateTimeRange>
        </div>
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@MonthRangeValue" ViewMode="DatePickerViewMode.Month" DateFormat="yyyy-MM">
            </DateTimeRange>
        </div>
    </div>
</DemoBlock>

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

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