@if (CalcOreFasi == null)
{
    <LoadingData DisplaySize="LoadingData.CtrlSize.Small"></LoadingData>
}
else
{
    <div class="card border border-info">
        <div class="card-header bg-info text-light py-1">
            <div class="d-flex justify-content-between border border-top-0 border-left-0 border-right-0">
                <div class="px-0">
                    @if (currProj != null && currProj.GruppiNav != null)
                    {
                        <b>@currProj.GruppiNav.DescrGruppo</b>
                    }
                    else
                    {
                        if (currProj != null && currProj.Gruppo != null)
                        {
                            <b>@currProj.Gruppo</b>
                        }
                    }
                </div>
                <div class="px-0">
                    @if (currProj != null)
                    {
                        <span>@currProj.ClienteNav.RagSociale</span>
                    }
                </div>
            </div>
            <div class="d-flex justify-content-between">
                <div class="px-0">
                    @if (currProj != null)
                    {
                        <span>@currProj.NomeProj</span>
                    }
                </div>
            </div>
        </div>
        <div class="card-body py-1">
            <div class="d-flex justify-content-between">
                <div class="px-0">
                    Budget: <b>@CalcOreFasi.budgetTime.ToString("N2")</b>
                </div>
                <div class="px-0 @cssCheckOre">
                    consumate: <b>@CalcOreFasi.percUsed.ToString("P1")</b>
                </div>
            </div>
            <div class="d-flex justify-content-between">
                <div class="px-0">
                    Caricate: <b>@CalcOreFasi.totOre.ToString("N2")</b>
                </div>
                <div class="px-0 @cssCheckOre">
                    rimanenti: <b>@CalcOreFasi.timeRem.ToString("N0")</b>
                </div>
            </div>
            @if ((CalcOreFasi.Attivo != null && !(bool)CalcOreFasi.Attivo) || VetoProj)
            {
                if (VetoInsert)
                {
                    <div class="alert alert-danger">
                        <b>Attenzione!</b>: impossibile caricare altre ore nel progetto, verificare l'attivazione e le ore a budget con amministrazione prima di procedere!
                    </div>
                }
                else
                {
                    <div class="alert alert-warning">
                        <b>Attenzione!</b>: progetto inattivo: verificare con amministrazione prima di procedere!
                    </div>
                }
            }
        </div>
    </div>
    <div class="card border border-info mt-1">
        <div class="card-header bg-info text-light py-1">
            @if (currFase != null)
            {
                <div class="d-flex justify-content-between">
                    <div class="px-0">
                        @if (ancestFase != null)
                        {
                            <b>@ancestFase.NomeFase</b>
                        }
                    </div>
                    <div class="px-0">
                        <span>@currFase.NomeFase</span>
                    </div>
                </div>
            }
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-6" title="Chiusura/prolungamento attività precedente all'avvio della nuova attività">
                    <label class="small">Consecutiva</label>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="switchClosePrec" @bind-value="@doClose" checked="@doClose">
                        <label class="custom-control-label" for="switchClosePrec">Chiudi</label>
                    </div>
                </div>
                <div class="col-6 text-end" title="Durata prevista attività (minuti)">
                    <label class="small">Durata Prevista</label>
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Min</span>
                        </div>
                        <input type="number" class="form-control text-end" placeholder="minuti" @bind-value="@minDur">
                    </div>
                </div>
                <div class="col-12" title="Descrizione di dettaglio attività">
                    <label class="small">Descrizione Attività</label>
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="far fa-comment-alt"></i></span>
                        </div>
                        <input type="text" class="form-control text-end" placeholder="Inserire descrizione attività" @bind-value="@descrizione">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    @if (AppMServ.PayloadOk)
                    {
                        if (CalcOreFasi != null)
                        {
                            if (buttonEnabled)
                            {
                                <button class="btn btn-lg w-100 btn-success" @onclick="() => StartRecord()"><i class="fas fa-play"></i> Start</button>
                            }
                        }
                    }
                </div>
                <div class="col-6">
                    <button class="btn btn-lg w-100 btn-warning" @onclick="() => ClosePage()"><i class="fas fa-ban"></i> Cancel</button>
                </div>
            </div>
        </div>
    </div>
}