@page "/TestGauges"

<PageTitle>TestGauges</PageTitle>

<div class="card shadow">
    <div class="card-header">
        <h3>Test componente Gauges</h3>
    </div>
    <div class="card-body py-1">
        <div class="row py-4" style="background-color: #ACDDAC;">
            <div class="col-1 bg-dark">
                <CircleGaugeMulti Titolo="@($"{currVal1}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemo1" ShowCircleBtn="true"></CircleGaugeMulti>
            </div>
            <div class="col-2 bg-dark">
                <CircleGaugeMulti Titolo="@($"{currVal2}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemoIn2" ListOuter="@DDemoOut2" ShowCircleBtn="true"></CircleGaugeMulti>
            </div>
            <div class="col-3 bg-dark">
                <CircleGaugeMulti Titolo="@($"{currVal1}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemo1" ShowCircleBtn="true"></CircleGaugeMulti>
            </div>
            <div class="col-3 bg-dark">
                <CircleGaugeMulti Titolo="@($"{currVal2}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemoIn2" ListOuter="@DDemoOut2" ShowCircleBtn="true"></CircleGaugeMulti>
            </div>
            <div class="col-2 bg-dark">
                <CircleGaugeMulti Titolo="@($"{currVal1}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemo1" ShowCircleBtn="true"></CircleGaugeMulti>
            </div>
            <div class="col-1 bg-dark">
                <CircleGaugeMulti Titolo="@($"{currVal2}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemoIn2" ListOuter="@DDemoOut2" ShowCircleBtn="true"></CircleGaugeMulti>
            </div>
        </div>
        <div class="row">
            <div class="col-12 containerCalendario">
                <small>Blocco calendario (sottostante) gestito da css sticky sul fondo</small>
                <div class="calendario">
                    <div class="d-flex justify-content-between">
                        <div>
                            <CircleGauge Titolo="9:00" Testo="Caricate" maxVal="480" currVal="540" StrokeColorVal="#F1C40F" ShowCircleBtn="true"></CircleGauge>
                        </div>
                        <div>
                            <CircleGauge Titolo="4:00" Testo="Lavorate" maxVal="480" currVal="240" StrokeColorVal="#00FF00" ShowCircleBtn="true"></CircleGauge>
                        </div>
                        <div>
                            <CircleGauge Titolo="12:00" Testo="Caricate" maxVal="480" currVal="720" StrokeColorVal="#F1C40F" StrokeColorValOuter="#01C4FF" ShowCircleBtn="true"></CircleGauge>
                        </div>
                    </div>
                    <div class="containerBtnTemp">
                        <button class="btn btn-sm btn-warning">
                            TEMP
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>