@page "/forminputdatetimepicker"

@rendermode RenderMode.InteractiveServer

<FluentLabel Typo="Typography.H3">Date & Time</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
    The <code>FluentDatePicker</code> allows for selecting dates from dropdown calendar.
</FluentLabel>
<FluentLabel Typo="Typography.Body">
    The <code>FluentTimePicker</code> allows for picking a specific time of day.
</FluentLabel>

<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    <div>
        <h4>DatePicker</h4>
        <FluentDatePicker Label="Default" @bind-Value="eval" />
        <FluentDatePicker Label="Days view" @bind-Value="eval" View="CalendarViews.Days" />
        <FluentDatePicker Label="Months view" @bind-Value="eval" View="CalendarViews.Months" />
        <FluentDatePicker Label="Years view" @bind-Value="eval" View="CalendarViews.Years" />
        <p>Selected Date: @eval?.ToString("yyyy-MM-dd")</p>
    </div>
    <div>
        <h4>TimePicker</h4>
        <FluentTimePicker Label="Default" @bind-Value="eval"/>
        <p>Selected Time: @eval?.ToString("T")</p>
    </div>
</FluentCard>

<FluentLabel class="my-3" Typo="Typography.H4">Conversion</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    @* Default usage *@
    <div>
        <FluentDatePicker @bind-Value="MyDateTime" />
        <FluentTimePicker @bind-Value="MyDateTime" />
        <b>Date:</b> @(MyDateTime?.ToString("yyyy-MM-dd"))
        <b>Time:</b> @(MyDateTime?.ToString("HH:mm"))
    </div>
</FluentCard>

@code {
    DateTime? eval = DateTime.Now;

    DateTime? MyDateTime = DateTime.Now;
}