@page "/TestCalendario"

<PageTitle>TestGauges</PageTitle>

<div class="card shadow">
    <div class="card-header">
        <h3>Test Calendario + Gauges</h3>
    </div>
    <div class="card-body py-0">

        <div class="row bg-dark py-3">
            <div class="col-12 col-md-6">
                <CalendarWeek DateList="@ListDate" EventList="@EventListWeek" PercX="150" PercY="0" backToCalendar="ForceReloadWeek" EC_HeadDateSel="SetDayDetail"></CalendarWeek>
            </div>
            <div class="col-12 col-md-6">
                <div class="row bg-dark">
                    <div class="col">
                        <CircleGauge maxVal="480" currVal="240" Titolo="4:00" Testo="Lavorate"></CircleGauge>
                    </div>
                    <div class="col">
                        <CircleGauge maxVal="480" currVal="360" Titolo="6:00" Testo="Lavorate"></CircleGauge>
                    </div>
                    <div class="col">
                        <CircleGauge maxVal="480" currVal="480" Titolo="8:00" Testo="Lavorate"></CircleGauge>
                    </div>
                    <div class="col">
                        <CircleGauge maxVal="480" currVal="600" Titolo="10:00" Testo="Lavorate"></CircleGauge>
                    </div>
                </div>

                <div class="row bg-dark py-3">
                    <div class="col">
                        <CalendarMonth DtRif="@dtCurr" MainCss="table table-dark table-borderless" DateSelected="DisplayDate" DateCheck="@DateCheck" SingleWeek="@singleWeek"></CalendarMonth>
                    </div>
                </div>

                <div class="d-flex justify-content-between">
                    <div>
                        <b>@($"{dtCurr:ddd dd.MM.yyyy}")</b>
                    </div>
                    <div>
                        <button class="btn btn-primary" @onclick="() => resetCal()">Reset</button>
                    </div>
                    <div>
                        single: <b>@singleWeek</b>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>