@page "/Test"
@attribute [AllowAnonymous]

@using GPW.CORE.UI.Components

<PageTitle>Test - Fasi</PageTitle>

<div class="row">
    <div class="col-4">
        <ChartTS Id="TempRil" DataTS="@getTsData()" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.3)"></ChartTS>
    </div>
    <div class="col-4">
        <ChartHist Id="FreqTemp" Data="@(new[] { "5", "8", "10", "6", "4", "3" })" Labels="@(new[] { "35.8", "35.9", "36.0", "36.1", "36.2", "36.3" })" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)"></ChartHist>
    </div>
    <div class="col-4">
        <Chart Id="Bar" Type="@Chart.ChartType.Bar" Data="@(new[] { "10", "9", "12", "8", "14" })" BackgroundColor="@(new[] { "yellow","red", "green", "blue"})" Labels="@(new[] { "S01","S02","S03","S04"})"></Chart>
    </div>
</div>

@*<div class="p-1 flex-fill text-left">
    <div class="d-flex justify-content-between text-center">
        <div class="py-0 small flex-fill " style="width: 5.36%"><div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div></div><div class="py-0 small flex-fill  border border-info rounded" style="width: 3.57%">
            <div class="d-flex">
                <div class="dropdown">
                    <button class="dropbtn px-1 text-center border border-secondary border-top-0 border-bottom-0 border-left-0 btn btn-info btn-sm" style="font-size: 0.72rem;">
                        <div>07</div>
                        <div>45</div>
                        <div class="badge badge-dark">30'</div>
                    </button><div class="dropdown-content border border-dark table-dark text-light rounded p-2">
                        <div class="row">
                            <div class="col-9 pr-0">
                                <div class="text-light text-left"><b>Steamware</b> - <span class="small">ORG Personale</span></div>
                                <div class="text-info text-left" title="Mail">Mail</div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="switch-87105" title="Modifica Fine" value="">
                                    <label class="custom-control-label small" for="switch-87105">Fine</label>
                                </div>
                            </div>
                        </div>
                        <div class="btn-group btn-group-sm w-100 py-2">
                            <button class="btn btn-sm btn-info"><i class="fas fa-pencil-alt"></i> Edit</button>
                            <button class="btn btn-sm btn-primary"><i class="far fa-copy"></i> Copy</button>
                            <button class="btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i> Delete</button>
                        </div>
                        <div class="btn-group btn-group-sm w-100 small">
                            <button class="btn btn-sm btn-warning">-2h</button>
                            <button class="btn btn-sm btn-warning">-1h</button>
                            <button class="btn btn-sm btn-warning">-30'</button>
                            <button class="btn btn-sm btn-warning">-15'</button>
                            <button class="btn btn-sm btn-success">+15'</button>
                            <button class="btn btn-sm btn-success">+30'</button>
                            <button class="btn btn-sm btn-success">+1h</button>
                            <button class="btn btn-sm btn-success">+2h</button>
                        </div>
                    </div>
                </div>
                <div class="px-1 text-left textTrim flex-fill">
                    <div class="text-dark" title="Steamware - ORG Personale"><b>St...</b> - OR...</div>
                    <div class="text-secondary" title="Mail">Mail</div>
                    <div class="small" title="-">-</div>
                </div>
            </div>
        </div><div class="py-0 small flex-fill  border border-info rounded" style="width: 30.36%">
            <div class="d-flex">
                <div class="dropdown">
                    <button class="dropbtn px-1 text-center border border-secondary border-top-0 border-bottom-0 border-left-0 btn btn-info btn-sm" style="font-size: 0.72rem;">
                        <div>08:15</div>
                        <div>12:30</div>
                        <div class="badge badge-dark">4h 15'</div>
                    </button><div class="dropdown-content border border-dark table-dark text-light rounded p-2">
                        <div class="row">
                            <div class="col-9 pr-0">
                                <div class="text-light text-left"><b>SteamSW</b> - <span class="small">GPW</span></div>
                                <div class="text-info text-left" title="sviluppo">sviluppo</div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="switch-87131" title="Modifica Fine" value="">
                                    <label class="custom-control-label small" for="switch-87131">Fine</label>
                                </div>
                            </div>
                        </div>
                        <div class="btn-group btn-group-sm w-100 py-2">
                            <button class="btn btn-sm btn-info"><i class="fas fa-pencil-alt"></i> Edit</button>
                            <button class="btn btn-sm btn-primary"><i class="far fa-copy"></i> Copy</button>
                            <button class="btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i> Delete</button>
                        </div>
                        <div class="btn-group btn-group-sm w-100 small">
                            <button class="btn btn-sm btn-warning">-2h</button>
                            <button class="btn btn-sm btn-warning">-1h</button>
                            <button class="btn btn-sm btn-warning">-30'</button>
                            <button class="btn btn-sm btn-warning">-15'</button>
                            <button class="btn btn-sm btn-success">+15'</button>
                            <button class="btn btn-sm btn-success">+30'</button>
                            <button class="btn btn-sm btn-success">+1h</button>
                            <button class="btn btn-sm btn-success">+2h</button>
                        </div>
                    </div>
                </div>
                <div class="px-1 text-left textTrim flex-fill">
                    <div class="text-dark" title="SteamSW - GPW"><b>SteamSW</b> - GPW</div>
                    <div class="text-secondary" title="sviluppo">sviluppo</div>
                    <div class="small" title="Continuo sviluppo editing">Continuo sviluppo editing</div>
                </div>
            </div>
        </div><div class="py-0 small flex-fill " style="width: 10.71%"><div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div></div><div class="py-0 small flex-fill  border border-info rounded" style="width: 44.64%">
            <div class="d-flex">
                <div class="dropdown">
                    <button class="dropbtn px-1 text-center border border-secondary border-top-0 border-bottom-0 border-left-0 btn btn-info btn-sm" style="font-size: 0.72rem;">
                        <div>14:00</div>
                        <div>20:15</div>
                        <div class="badge badge-dark">6h 15'</div>
                    </button><div class="dropdown-content border border-dark table-dark text-light rounded p-2">
                        <div class="row">
                            <div class="col-9 pr-0">
                                <div class="text-light text-left"><b>SteamSW</b> - <span class="small">GPW</span></div>
                                <div class="text-info text-left" title="sviluppo">sviluppo</div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="switch-87143" title="Modifica Fine" value="">
                                    <label class="custom-control-label small" for="switch-87143">Fine</label>
                                </div>
                            </div>
                        </div>
                        <div class="btn-group btn-group-sm w-100 py-2">
                            <button class="btn btn-sm btn-info"><i class="fas fa-pencil-alt"></i> Edit</button>
                            <button class="btn btn-sm btn-primary"><i class="far fa-copy"></i> Copy</button>
                            <button class="btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i> Delete</button>
                        </div>
                        <div class="btn-group btn-group-sm w-100 small">
                            <button class="btn btn-sm btn-warning">-2h</button>
                            <button class="btn btn-sm btn-warning">-1h</button>
                            <button class="btn btn-sm btn-warning">-30'</button>
                            <button class="btn btn-sm btn-warning">-15'</button>
                            <button class="btn btn-sm btn-success">+15'</button>
                            <button class="btn btn-sm btn-success">+30'</button>
                            <button class="btn btn-sm btn-success">+1h</button>
                            <button class="btn btn-sm btn-success">+2h</button>
                        </div>
                    </div>
                </div>
                <div class="px-1 text-left textTrim flex-fill">
                    <div class="text-dark" title="SteamSW - GPW"><b>SteamSW</b> - GPW</div>
                    <div class="text-secondary" title="sviluppo">sviluppo</div>
                    <div class="small" title="Continuo sviluppo editing">Continuo sviluppo editing</div>
                </div>
            </div>
        </div><div class="py-0 small flex-fill " style="width: 5.36%"><div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div></div>
    </div>
</div>

<div class="p-1 flex-fill text-left">
    <div class="d-flex justify-content-between text-center">
        <div class="py-0 small flex-fill " style="width: 5.36%">
            <div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div>
        </div>
        <div class="py-0 small flex-fill  border border-info rounded" style="width: 13.57%">
            <div class="d-flex">
                <div class="dropdown">
                    <button class="dropbtn px-1 text-center border border-secondary border-top-0 border-bottom-0 border-left-0 btn btn-info btn-sm" style="font-size: 0.72rem;">
                        <div>07</div>
                        <div>45</div>
                        <div class="badge badge-dark">30'</div>
                    </button>
                    <div class="dropdown-content border border-dark table-dark text-light rounded p-2">
                        <div class="row">
                            <div class="col-9 pr-0">
                                <div class="text-light text-left"><b>Steamware</b> - <span class="small">ORG Personale</span></div>
                                <div class="text-info text-left" title="Mail">Mail</div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="switch-87105" title="Modifica Fine" value="">
                                    <label class="custom-control-label small" for="switch-87105">Fine</label>
                                </div>
                            </div>
                        </div>
                        <div class="btn-group btn-group-sm w-100 py-2">
                            <button class="btn btn-sm btn-info"><i class="fas fa-pencil-alt"></i> Edit</button>
                            <button class="btn btn-sm btn-primary"><i class="far fa-copy"></i> Copy</button>
                            <button class="btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i> Delete</button>
                        </div>
                        <div class="btn-group btn-group-sm w-100 small">
                            <button class="btn btn-sm btn-warning">-2h</button>
                            <button class="btn btn-sm btn-warning">-1h</button>
                            <button class="btn btn-sm btn-warning">-30'</button>
                            <button class="btn btn-sm btn-warning">-15'</button>
                            <button class="btn btn-sm btn-success">+15'</button>
                            <button class="btn btn-sm btn-success">+30'</button>
                            <button class="btn btn-sm btn-success">+1h</button>
                            <button class="btn btn-sm btn-success">+2h</button>
                        </div>
                    </div>
                </div>
                <div class="px-1 text-left textTrim flex-fill">
                    <div class="text-dark" title="Steamware - ORG Personale"><b>St...</b> - OR...</div>
                    <div class="text-secondary" title="Mail">Mail</div>
                    <div class="small" title="-">-</div>
                </div>
            </div>
        </div>
        <div class="py-0 small flex-fill  border border-info rounded" style="width: 30.36%; z-index:1; position: relative; left: -5%; top: 10px;">
            <div class="d-flex">
                <div class="dropdown">
                    <button class="dropbtn px-1 text-center border border-secondary border-top-0 border-bottom-0 border-left-0 btn btn-info btn-sm" style="font-size: 0.72rem;">
                        <div>08:15</div>
                        <div>12:30</div>
                        <div class="badge badge-dark">4h 15'</div>
                    </button><div class="dropdown-content border border-dark table-dark text-light rounded p-2">
                        <div class="row">
                            <div class="col-9 pr-0">
                                <div class="text-light text-left"><b>SteamSW</b> - <span class="small">GPW</span></div>
                                <div class="text-info text-left" title="sviluppo">sviluppo</div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="switch-87131" title="Modifica Fine" value="">
                                    <label class="custom-control-label small" for="switch-87131">Fine</label>
                                </div>
                            </div>
                        </div>
                        <div class="btn-group btn-group-sm w-100 py-2">
                            <button class="btn btn-sm btn-info"><i class="fas fa-pencil-alt"></i> Edit</button>
                            <button class="btn btn-sm btn-primary"><i class="far fa-copy"></i> Copy</button>
                            <button class="btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i> Delete</button>
                        </div>
                        <div class="btn-group btn-group-sm w-100 small">
                            <button class="btn btn-sm btn-warning">-2h</button>
                            <button class="btn btn-sm btn-warning">-1h</button>
                            <button class="btn btn-sm btn-warning">-30'</button>
                            <button class="btn btn-sm btn-warning">-15'</button>
                            <button class="btn btn-sm btn-success">+15'</button>
                            <button class="btn btn-sm btn-success">+30'</button>
                            <button class="btn btn-sm btn-success">+1h</button>
                            <button class="btn btn-sm btn-success">+2h</button>
                        </div>
                    </div>
                </div>
                <div class="px-1 text-left textTrim flex-fill bg-light">
                    <div class="text-dark" title="SteamSW - GPW"><b>SteamSW</b> - GPW</div>
                    <div class="text-secondary" title="sviluppo">sviluppo</div>
                    <div class="small" title="Continuo sviluppo editing">Continuo sviluppo editing</div>
                </div>
            </div>
        </div><div class="py-0 small flex-fill " style="width: 10.71%"><div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div></div><div class="py-0 small flex-fill  border border-info rounded" style="width: 44.64%">
            <div class="d-flex">
                <div class="dropdown">
                    <button class="dropbtn px-1 text-center border border-secondary border-top-0 border-bottom-0 border-left-0 btn btn-info btn-sm" style="font-size: 0.72rem;">
                        <div>14:00</div>
                        <div>20:15</div>
                        <div class="badge badge-dark">6h 15'</div>
                    </button><div class="dropdown-content border border-dark table-dark text-light rounded p-2">
                        <div class="row">
                            <div class="col-9 pr-0">
                                <div class="text-light text-left"><b>SteamSW</b> - <span class="small">GPW</span></div>
                                <div class="text-info text-left" title="sviluppo">sviluppo</div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="switch-87143" title="Modifica Fine" value="">
                                    <label class="custom-control-label small" for="switch-87143">Fine</label>
                                </div>
                            </div>
                        </div>
                        <div class="btn-group btn-group-sm w-100 py-2">
                            <button class="btn btn-sm btn-info"><i class="fas fa-pencil-alt"></i> Edit</button>
                            <button class="btn btn-sm btn-primary"><i class="far fa-copy"></i> Copy</button>
                            <button class="btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i> Delete</button>
                        </div>
                        <div class="btn-group btn-group-sm w-100 small">
                            <button class="btn btn-sm btn-warning">-2h</button>
                            <button class="btn btn-sm btn-warning">-1h</button>
                            <button class="btn btn-sm btn-warning">-30'</button>
                            <button class="btn btn-sm btn-warning">-15'</button>
                            <button class="btn btn-sm btn-success">+15'</button>
                            <button class="btn btn-sm btn-success">+30'</button>
                            <button class="btn btn-sm btn-success">+1h</button>
                            <button class="btn btn-sm btn-success">+2h</button>
                        </div>
                    </div>
                </div>
                <div class="px-1 text-left textTrim flex-fill">
                    <div class="text-dark" title="SteamSW - GPW"><b>SteamSW</b> - GPW</div>
                    <div class="text-secondary" title="sviluppo">sviluppo</div>
                    <div class="small" title="Continuo sviluppo editing">Continuo sviluppo editing</div>
                </div>
            </div>
        </div><div class="py-0 small flex-fill " style="width: 5.36%"><div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div></div>
    </div>
</div>*@

<style>
    .containerTest {
        width: 100%;
        height: 6rem;
        position: relative;
        margin: 0px;
    }

    .box {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
    }

    .overlay {
        z-index: 5;
    }

        .overlay:hover {
            z-index: +100;
            opacity: 1;
        }

</style>

<div class="containerTest table-secondary">
    <div class="box bg-primary overlay" style="width: 35%;">Testo 1</div>
    <div class="box bg-secondary overlay" style="width: 25%; left: 20%; top: 10%;">Testo 2</div>
    <div class="box bg-primary overlay" style="width: 20%; left: 40%; top: 0%;">Testo 3</div>
    <div class="box bg-secondary overlay" style="width: 25%; left: 55%; top: 10%;">Testo 4</div>
</div>


@*<div class="card">
    <div class="card-header table-primary pb-0 mb-0">
    <h2>Fasi</h2>
    </div>
    <div class="card-body">
    @if (ListRecords == null)
    {
    <LoadingData></LoadingData>
    }
    else if (totalCount == 0)
    {
    <div class="alert alert-warning text-center display-4">No Record Found</div>
    }
    else
    {
    <div class="row">
    <div class="col-12">
    <table class="table table-sm table-striped">
    <thead>
    <tr>
    <th>ID</th>
    <th>Cod</th>
    <th>Nome</th>
    <th class="text-right">Descrizione</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var record in ListRecords)
    {
    <tr>
    <td>
    <span>P<b>@record.IdxProgetto</b> | @record.IdxFase (&larr; @record.IdxFaseAncest)</span>
    </td>
    <td>
    <span><b>@record.CodFase</b></span>
    </td>
    <td>
    <span>@record.NomeFase</span>
    </td>
    <td class="text-right">
    @record.DescrizioneFase
    </td>
    </tr>
    }
    </tbody>
    </table>
    </div>
    </div>
    }
    </div>
    <div class="card-footer p-1">
    <DataPager PageSize="numRecord" currPage="currPage" numRecordChanged="ForceReload" numPageChanged="ForceReloadPage" totalCount="totalCount" showLoading="isLoading" />
    </div>
    </div>*@