@page "/callstats"

<div class="card shadow">
    <div class="card-header">
        <h3>Current Call Stats (24h)</h3>
    </div>
    <div class="card-body p-1">
        <div class="row mb-2">
            <div class="col-3">
                <ul class="list-group shadow">
                    <li class="list-group-item active d-flex justify-content-between align-items-start">
                        <b>Avail Data</b>
                        <button class="btn btn-sm btn-info" @onclick="() => DoReset()">
                            <i class="fa-solid fa-arrow-rotate-right"></i>
                        </button>
                    </li>
                    @foreach (var item in ParetoDay)
                    {
                        <li class="list-group-item d-flex justify-content-between align-items-start small py-1">
                            <span class="align-items-center">@item.Key</span>
                            <button class="btn btn-sm btn-info" @onclick="() => DoSelect(item.Key)">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </button>
                        </li>
                    }
                </ul>
            </div>
            @if (string.IsNullOrEmpty(@currSelect))
            {
                <div class="col-9">
                    <div class="alert alert-info">selezionare la metrica</div>
                </div>
            }
            else
            {
                <div class="col-6">
                    <BarPlot Id="@currSelect" AspRatio="2" Data="@DatiPareto" Labels="@LabelPareto" Legenda="@currTitle" lineColor="@lineColors" backColor="@bgColors"></BarPlot>
                </div>
                <div class="col-3">
                    <PieChart Id="PieSelected" AspRatio="1" LegendPos="none" Data="@DatiPareto" Labels="@LabelPareto" lineColor="@lineColors" backColor="@bgColors" Title="@currTitle"></PieChart>
                </div>
            }
        </div>
        @if (!string.IsNullOrEmpty(@currSelect))
        {
            <div class="row mb-2">
                <div class="col-3">
                    <ParetoDetail Title="@currSelect" ParetoList="@currData"></ParetoDetail>
                </div>
                <div class="col-9">
                    timeserie selezionata x num call/tempo
                </div>
            </div>
        }
        @*         <div class="row small">
            @foreach (var item in ParetoDay)
            {
                <div class="col-4 mb-2">
                    <ParetoDetail Title="@item.Key" ParetoList="@item.Value"></ParetoDetail>
                </div>
            }
        </div> *@
    </div>
</div>