@namespace BootstrapBlazor.Components
@inherits PopoverDropdownBase<DateTimeRangeValue>
@attribute [BootstrapModuleAutoLoader("DateTimePicker/DateTimePicker.razor.js", JSObjectReference = true)]

@if (IsShowLabel)
{
    <BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
}
<div @attributes="@AdditionalAttributes" id="@Id" tabindex="0" class="@ClassString" data-bb-dropdown=".datetime-range-body">
    <div class="dropdown-toggle datetime-range-control" data-bs-toggle="@Constants.DropdownToggleString" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
        <div class="position-relative">
            <i class="@DateTimePickerIconClassString"></i>
            <input readonly="@ReadonlyString" class="@ValueClassString" @bind="@StartValueString" placeholder="@StartPlaceHolderText" disabled="@Disabled" />
        </div>
        <span class="range-separator">@SeparateText</span>
        <input readonly="@ReadonlyString" class="@ValueClassString" @bind="@EndValueString" placeholder="@EndPlaceHolderText" disabled="@Disabled" />
    </div>
    @if (ShowClearButton)
    {
        <i class="range-clear @ClearIcon" @onclick:stopPropagation @onclick="@ClickClearButton"></i>
    }
    <div class="datetime-range-body">
        <div class="range-panel-body">
            @if (ShowSidebar)
            {
                <div class="picker-panel-sidebar">
                    @foreach (var item in SidebarItems)
                    {
                        <div class="sidebar-item" @key="item">
                            <div @onclick="() => OnClickSidebarItem(item)">@item.Text</div>
                        </div>
                    }
                </div>
            }
            <CascadingValue Value="this" IsFixed="true">
                @if (RenderMode == DateTimeRangeRenderMode.Double)
                {
                    <DatePickerBody Value="@StartValue" ValueChanged="UpdateValue" OnDateChanged="OnStartDateChanged"
                                    DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
                                    ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm"
                                    ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
                                    ShowRightButtons="false" MaxValue="MaxValue" MinValue="MinValue">
                    </DatePickerBody>
                }
                <DatePickerBody Value="@EndValue" ValueChanged="UpdateValue" OnDateChanged="OnEndDateChanged"
                                DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
                                ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm"
                                ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
                                ShowLeftButtons="@_showLeftButtons" MaxValue="MaxValue" MinValue="MinValue">
                </DatePickerBody>
            </CascadingValue>
        </div>
        <div class="picker-panel-footer">
            <div class="flex-fill me-3">
                @if (ShowClearButton)
                {
                    <Button class="picker-panel-link-btn is-confirm is-clear" Color="Color.None" OnClick="@ClickClearButton">
                        <span>@ClearButtonText</span>
                    </Button>
                }
            </div>
            @if (ShowToday)
            {
                <Button class="picker-panel-link-btn is-confirm" Color="Color.None" OnClick="@ClickTodayButton">
                    <span>@TodayButtonText</span>
                </Button>
            }
            <Button class="picker-panel-link-btn is-confirm" Color="Color.None" OnClick="@ClickConfirmButton">
                <span>@ConfirmButtonText</span>
            </Button>
        </div>
    </div>
</div>
