@page "/datetime-picker"

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

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

<DemoBlock Title="@Localizer["DateTimePickerTitle"]" Introduction="@Localizer["DateTimePickerIntro"]" Name="DateTimePicker">
	<section ignore class="row g-3 mb-3">
		<div class="col-12 col-sm-6">
			<BootstrapInputGroup>
				<BootstrapInputGroupLabel DisplayText="IsButton"></BootstrapInputGroupLabel>
				<Switch @bind-Value="_isButton"></Switch>
			</BootstrapInputGroup>
		</div>
	</section>
	<DateTimePicker ViewMode="DatePickerViewMode.DateTime" TimeFormat="hh\:mm" IsButton="_isButton"
					Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged">
		<TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />
	</DateTimePicker>
	<ConsoleLogger @ref="TimePickerLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
	<section ignore>
		<GroupBox Title="@Localizer["Feature"]">
			<div class="row g-3 form-inline text-end">
				<div class="col-12 col-sm-6 col-lg-3">
					<BootstrapInputGroup>
						<BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowLunar"]"></BootstrapInputGroupLabel>
						<Switch @bind-Value="_showLunar" />
					</BootstrapInputGroup>
				</div>
				<div class="col-12 col-sm-6 col-lg-3">
					<BootstrapInputGroup>
						<BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowSolarTerm"]"></BootstrapInputGroupLabel>
						<Switch @bind-Value="_showSolarTerm" />
					</BootstrapInputGroup>
				</div>
				<div class="col-12 col-sm-6 col-lg-3">
					<BootstrapInputGroup>
						<BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowFestivals"]"></BootstrapInputGroupLabel>
						<Switch @bind-Value="_showFestivals" />
					</BootstrapInputGroup>
				</div>
				<div class="col-12 col-sm-6 col-lg-3">
					<BootstrapInputGroup>
						<BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowHolidays"]"></BootstrapInputGroupLabel>
						<Switch @bind-Value="_showHolidays" />
					</BootstrapInputGroup>
				</div>
			</div>
		</GroupBox>
		<div class="mt-3">
			<Pre>builder.Services.AddBootstrapHolidayService();</Pre>
		</div>
	</section>
	<DatePickerBody @bind-Value="Value" OnConfirm="@NormalOnConfirm" ShowFooter="false" ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm" ShowFestivals="_showFestivals" ShowHolidays="_showHolidays" />
	<ConsoleLogger @ref="NormalLogger" class="mt-3" />
	<section ignore>
		<Tips class="mt-3">
			<p>@((MarkupString)Localizer["FeatureIntro"].Value)</p>
			<ul class="ul-demo mt-3">
				<li>@((MarkupString)Localizer["FeatureShowLunarIntro"].Value)</li>
				<li>@((MarkupString)Localizer["FeatureShowSolarTermIntro"].Value)</li>
				<li>@((MarkupString)Localizer["FeatureShowFestivalsIntro"].Value)</li>
				<li>@((MarkupString)Localizer["FeatureShowHolidaysIntro"].Value)</li>
			</ul>
			<div>@((MarkupString)Localizer["FeatureFestivalIntro"].Value)</div>
		</Tips>
	</section>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
	<ValidateForm Model="this">
		<div class="row g-3">
			<div class="col-12 col-sm-auto">
				<DateTimePicker @bind-Value="@ValidateFormValue" />
			</div>
			<div class="col-12 col-sm-auto align-self-end">
				<Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" Icon="fa-solid fa-floppy-disk"></Button>
			</div>
		</div>
	</ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowIconTitle"]" Introduction="@Localizer["ShowIconIntro"]" Name="ShowIcon">
	<DateTimePicker TValue="DateTimeOffset ?" ShowIcon="false" />
</DemoBlock>

<DemoBlock Title="@Localizer["DateTimeOffsetTitle"]" Introduction="@Localizer["DateTimeOffsetIntro"]" Name="DateTimeOffset">
	<DateTimePicker @bind-Value="DateTimeOffsetValue" />
</DemoBlock>

<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
	<div class="row g-3">
		<div class="col-sm-6">
			<DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="dd/MM/yyyy" />
		</div>
		<div class="col-sm-6">
			<input class="form-control" @bind="@BindValueString" />
		</div>
	</div>
</DemoBlock>

<DemoBlock Title="@Localizer["IsEditableTitle"]" Introduction="@Localizer["IsEditableIntro"]" Name="IsEditable">
	<div class="row g-3">
		<div class="col-sm-6">
			<DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="yyyy-MM-dd" />
		</div>
	</div>
</DemoBlock>

<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode">
	<section ignore>@((MarkupString)Localizer["ViewModeTip"].Value)</section>
	<div class="row g-3">
		<div class="col-12 col-sm-6">
			<DateTimePicker @bind-Value="YearValue" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" DateFormat="yyyy" />
		</div>
		<div class="col-12 col-sm-6">
			<DateTimePicker @bind-Value="MonthValue" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" DateFormat="yyyy-MM" />
		</div>
		<div class="col-12 col-sm-6">
			<DateTimePicker @bind-Value="DateValue" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" DateFormat="yyyy-MM-dd" />
		</div>
		<div class="col-12 col-sm-6">
			<DateTimePicker @bind-Value="DateTimeValue" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" DateTimeFormat="yyyy-MM-dd HH:mm:ss" />
		</div>
	</div>
</DemoBlock>

<DemoBlock Title="@Localizer["NullValueTitle"]" Introduction="@Localizer["NullValueIntro"]" Name="NullValue">
	<section ignore>@((MarkupString)Localizer["NullValueTip"].Value)</section>
	<div class="row g-3">
		<div class="col-12 col-sm-8">
			<DateTimePicker @bind-Value="@BindNullValue" />
		</div>
		<div class="col-12 col-sm-4">
			<Display TValue="string" Value="@GetNullValueString" />
		</div>
	</div>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel">
	<section ignore class="mb-3">
		@((MarkupString)Localizer["ShowLabelTip"].Value)
	</section>
	<DateTimePicker ShowLabel="true" DisplayText="@Localizer["DisplayText"]" @bind-Value="@ShowLabelValue" />
</DemoBlock>

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

<DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar">
	<DateTimePicker ShowSidebar="true" @bind-Value="SidebarValue" />
</DemoBlock>

<DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue">
	<DateTimePicker @bind-Value="@AllowValue"
					MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))"
					MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose">
	<section ignore class="mb-3">
		@((MarkupString)Localizer["BlockAutoCloseDesc"].Value)
	</section>
	<DateTimePicker @bind-Value="@AutoCloseValue" AutoClose="false" />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
	<div class="row g-3">
		<div class="col-12 col-sm-6">
			<BootstrapInputGroup>
				<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
				<DateTimePicker TValue="DateTime" ShowIcon="false" />
			</BootstrapInputGroup>
		</div>
		<div class="col-12 col-sm-6">
			<BootstrapInputGroup>
				<DateTimePicker TValue="DateTime" />
				<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
			</BootstrapInputGroup>
		</div>
		<div class="col-12 col-sm-6">
			<BootstrapInputGroup>
				<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
				<DateTimePicker TValue="DateTime" ShowIcon="false" />
				<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
			</BootstrapInputGroup>
		</div>
	</div>
</DemoBlock>

<DemoBlock Title="@Localizer["DayTemplateTitle"]" Introduction="@Localizer["DayTemplateIntro"]" Name="DayTemplate">
	<DateTimePicker TValue="DateTimeOffset ?" CustomClass="custom-picker">
		<DayTemplate>
			<span class="custom-cell">
				<span>@context.Day</span>
				<span class="@GetMarkByDay(context)"></span>
			</span>
		</DayTemplate>
	</DateTimePicker>
</DemoBlock>

<DemoBlock Title="@Localizer["DisableDayCallbackTitle"]" Introduction="@Localizer["DisableDayCallbackIntro"]" Name="OnDisabledDayCallback">
	<section ignore>
		<Tips>
			@((MarkupString)Localizer["DisableDayCallbackTip"].Value)
		</Tips>
		<GroupBox Title="@Localizer["DisableOptions"]">
			<div class="row g-3 form-inline text-end">
				<div class="col-12 col-sm-6 col-md-auto">
					<Switch DisplayText="@Localizer["DisableWeekend"]" ShowLabel="true" @bind-Value="_disableWeekend" OnValueChanged="OnDisabledDaysChanged" />
				</div>
				<div class="col-12 col-sm-6 col-md-auto">
					<Switch DisplayText="@Localizer["DisableToday"]" ShowLabel="true" @bind-Value="_disableToday" OnValueChanged="OnDisabledDaysChanged" />
				</div>
			</div>
		</GroupBox>
	</section>
	<div class="row form-inline g-3">
		<div class="col-12 col-sm-6">
			<DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackAllowNullDisplayText"]"
							ShowLabel="true" @bind-Value="@_disabledNullValue" @ref="_picker1"
							OnGetDisabledDaysCallback="OnGetDisabledDaysCallback" DisplayDisabledDayAsEmpty="true">
			</DateTimePicker>
		</div>
		<div class="col-12 col-sm-6">
			<DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackNotAllowNullDisplayText"]"
							ShowLabel="true" @bind-Value="@_disabledValue" @ref="_picker2"
							OnGetDisabledDaysCallback="OnGetDisabledDaysCallback">
			</DateTimePicker>
		</div>
	</div>
</DemoBlock>

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

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