@using System.Globalization;
@if (loaded)
{
    <div id="picker" class="m-2" style="width:270px; height:auto;">
        <!-- DatePicker input !can be edited manualy -->
        <div class="inline-block"><input type="text" value="@Date.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
        @if (Shown)
        {
            <!-- DatePicker header -->
            <div id="picker_header" class="bg-info" style="height:80px;">
                <div class="text-medium p-1">
                    @Date.Year.ToString()
                </div>
                <div class="text-large p-1">
                    @Date.ToString("ddd, " + Format)
                </div>
            </div>
            <!-- DatePicker body -->
            <div id="picker_body" class="bg-white" style="height:auto;">
                @switch (Selecting)
                {
                    case Selecting.Years:
                        {
                            <div class="@NavBarClass">
                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@Date.ToString("yyyy")</div>
                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
                            </div>
                            @for (int i = Date.Year - 7; i < Date.Year + 8; i++)
                            {
                                int y = i;
                                <a href="#" @onclick="@(()=>SetYear(y))">
                                    <div class="chip-group-content d-inline-flex bg-core m-1 b-1 b-r-3 text-light" style="width:30%;">
                                        <div class="chip-leading-icon"></div>
                                        <div class="chip-label">@i.ToString()</div>
                                        <div class="chip-cta-icon"></div>
                                    </div>

                                </a>
                                if (Date.Year - i % 3 == 0)
                                {
                                    <br />
                                }
                            }
                            break;
                        }
                    case Selecting.Months:
                        {
                            <div class="@NavBarClass">
                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@Date.ToString("MMMM yyyy")</div>
                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
                            </div>
                            @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
                            {
                                int m = i;
                                <a href="#" @onclick="@(()=>SetMonth(m))">

                                    <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
                                        <div class="chip-leading-icon"></div>
                                        <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
                                        <div class="chip-cta-icon"></div>
                                    </div>

                                </a>
                                if (i % 3 == 0)
                                {
                                    <br />
                                }
                            }
                            break;
                        }
                    case (Selecting.Days):
                        {
                            <div class="@NavBarClass">
                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@Date.ToString("MMMM yyyy")</div>
                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
                            </div>

                            @for (int i = 0; i < 7; i++)
                            {
                                <div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@calendarStart.AddDays(i).ToString("ddd")</div>
                            }
                            @foreach (var Date in Dates)
                            {
                                <a href="#" @onclick="@(()=>SetDate(Date))">
                                    <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
                                        @Date.Day.ToString()
                                    </div>
                                </a>
                                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
                                {
                                    <br />
                                }

                                calendarStart = calendarStart.AddDays(1);
                            }
                            break;
                        }
                }
            </div>
            <!-- Bottom bar -->
            <div>
                
            </div>
        }
    </div>
}
