@using Lux.UI.Components.Compo.Charts

<div class="card">
    <div class="card-header d-flex justify-content-between">
        <div class="px-0">
            <div class="fw-bold fs-5">RealTime usage</div>
            <small>
                updated: @($"{lastUpdate:ddd yyy.MM.dd HH:mm:ss}")
            </small>
        </div>
        <div class="px-0 small d-flex">
            <div class="px-0">

                <div class="input-group input-group-sm">
                    <span class="input-group-text">Modo</span>
                    <div class="input-group-text">
                        @foreach (var type in Enum.GetValues<EgwCoreLib.Lux.Core.Enums.RuidTagMode>())
                        {
                            <div class="form-check form-check-inline">
                                <input class="form-check-input"
                                       type="radio"
                                       name="tagOpt"
                                       id="@($"enum{type}")"
                                       checked="@(SelMode == type)"
                                       @onchange="@(() => OnTagChanged(type))">
                                <label class="form-check-label" for="@($"enum{type}")">
                                    @type.ToString()
                                </label>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="px-0">
                <div class="input-group input-group-sm">
                    <span class="input-group-text">Periodo</span>
                    <div class="input-group-text">
                        @foreach (var group in Enum.GetValues<EgwCoreLib.Lux.Core.Enums.RuidGroupMode>())
                        {
                            <div class="form-check form-check-inline">
                                <input class="form-check-input"
                                       type="radio"
                                       name="groupOpt"
                                       id="@($"enum{group}")"
                                       checked="@(SelGroup == group)"
                                       @onchange="@(() => OnGroupChanged(group))">
                                <label class="form-check-label" for="@($"enum{group}")">
                                    @group.ToString()
                                </label>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="px-0">
                <div class="input-group input-group-sm">
                    <span class="input-group-text">Giorni</span>
                    <input type="number" class="form-control text-end" @bind="@NumDays" style="width: 4rem;">
                    <span class="input-group-text">Refresh</span>
                    <input type="number" class="form-control text-end" @bind="@RefPeriod" style="width: 4rem;">
                    <span class="input-group-text"><i class="fa-solid fa-stopwatch"></i></span>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="card shadow">
            <div class="card-header">
                <b># Eventi</b>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-2">
                        <PieChart CanvasId="pieEventCount" PieDict="@DatasetCount" DictColorFill="@FillColors" DictColorBorder="@BorderColors" Label="# Richieste" />

                    </div>
                    <div class="col">
                        <StackedBarChart CanvasId="barEventCount" ListX="@ListX" DictY="@DSBarCount" DictColorFill="@FillColors" DictColorBorder="@BorderColors" />
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow mt-2">
            <div class="card-header">
                <b>Durata tot</b>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-2">
                        <PieChart CanvasId="pieElapsed" PieDict="@DataseElapsed" DictColorFill="@FillColors" DictColorBorder="@BorderColors" Label="Elapsed" />

                    </div>
                    <div class="col">
                        <StackedBarChart CanvasId="barEventElapsed" ListX="@ListX" DictY="@DSBarElapsed" DictColorFill="@FillColors" DictColorBorder="@BorderColors" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>