@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">
                <div class="card shadow">
                    <div class="card-header">
                        <div class="d-flex justify-content-between">
                            <div class="px-0 fw-bold">Avail Data</div>
                            <div class="px-0">
                                <button class="btn btn-sm btn-info" @onclick="() => DoReset()">
                                    <i class="fa-solid fa-arrow-rotate-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-1">
                        <ul class="list-group shadow">
                            @foreach (var item in ParetoDay)
                            {
                                <li class="list-group-item @CheckSelect(item.Key) 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>
                </div>
            </div>
            @if (string.IsNullOrEmpty(currHistId))
            {
                <div class="col-9">
                    <div class="alert alert-info">selezionare la metrica</div>
                </div>
            }
            else
            {
                <div class="col-6">
                    <BarPlot Id="@currHistId" AspRatio="2" Data="@DatiPareto" Labels="@LabelPareto" Legenda="@currTitle" lineColor="@lineColors" backColor="@bgColors"></BarPlot>
                </div>
                <div class="col-3">
                    <PieChart Id="@currPieId" AspRatio="1" LegendPos="none" Data="@DatiPareto" Labels="@LabelPareto" lineColor="@lineColors" backColor="@bgColors" Title="@currTitle"></PieChart>
                </div>
            }
        </div>
        @if (!string.IsNullOrEmpty(currHistId))
        {
            <div class="row mb-2">
                <div class="col-3">
                    <ParetoDetail Title="@currHistId" ParetoList="@currData" EC_Selected="ShowDetail"></ParetoDetail>
                </div>
                <div class="col-9">
                    @if (string.IsNullOrEmpty(currDetail))
                    {
                        <div class="alert alert-info">&larr; selezionare valore</div>
                    }
                    else
                    {
                        <b>@currDetail</b>
                        <i>timeserie selezionata x num call/tempo</i>
                    }
                </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>