@using ChartJs

<div class="row">
    <div class="col-2">
        <div class="card shadow">
            <div class="card-body p-1">
                <div>
                    <label class="form-label small">Tipo Flusso</label>
                    <select @bind="@CodFluxSel" class="form-select">
                            <option value="*">-- TUTTI --</option>
                        @foreach (var item in CodFluxList)
                        {
                            <option value="@item">@item</option>
                        }
                    </select>
                </div>
                <div class="mt-2">
                    <label class="form-label small">Periodo Analisi</label>
                    <ul class="list-group list-group-sm small">
                        @foreach (PeriodoSel sPer in Enum.GetValues(typeof(PeriodoSel)))
                        {
                            <li class="list-group-item align-items-center p-1">
                                <button class="btn btn-sm w-100 @CssBtn(sPer)" @onclick="() => SetModo(sPer)">@sPer Detail</button>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        </div>
        <div class="border" style="max-height: 14em; overflow:hidden; overflow-y: auto;">
            <ul class="list-group list-group-sm small">
                @foreach (var item in @ParetoData)
                {
                    <li class="list-group-item p-1 d-flex justify-content-between align-items-center">
                        @item.label
                        <span class="badge badge-primary badge-pill">@item.value</span>
                    </li>
                }
            </ul>
            <i>selezione ITEM da mostrare, tra quelli POSSIBILI dato periodo...</i>
        </div>
    </div>
    <div class="col-10">
        @if (RawData == null || RawData.Count == 0)
        {
            <div class="col-12">
                <div class="alert alert-secondary text-center h4"><span class="oi oi-graph"></span> No Chart Data</div>
            </div>
        }
        else
        {
            <div class="row">
                <div class="col">
                    <div class="text-center">
                        <b>@pSel</b> Detail
                    </div>
                    <MultiLine Id="plotDetail" AspRatio="3" DataTSList="@TSDataMultiDetail" Labels="@LabelPlotDet" lineColor="@lineColorsDet" backColor="@bgColorsDet" lTens="0" Titles="@lineTitlesDet" Stepped="false"></MultiLine>
                    <div class="text-center">
                        <b>Periodo</b>
                    </div>
                    <MultiLine Id="plotAll" AspRatio="3" DataTSList="@TSDataMulti" Labels="@LabelPlot" lineColor="@lineColors" backColor="@bgColors" lTens="0" Titles="@lineTitles" Stepped="false"></MultiLine>
                </div>
            </div>
        }
    </div>
</div>