@if (isLoading)
{
    <div class="card text-white mapBlock shadow bg-secondary p-0 m-0">
        <div class="card-body">
            <div class="placeholder-glow">
                <span class="placeholder col-7"></span>
                <span class="placeholder col-4"></span>
                <span class="placeholder col-4"></span>
                <span class="placeholder col-7"></span>
            </div>
        </div>
    </div>
}
else
{
    @if (FullMode)
    {
        <div class="card mapBlock shadow @RecMSE.Semaforo p-0 m-0" @onclick="ShowDetail">
            <img src="@ImgUrlMacc(RecMSE.Url)" class="card-img-top" alt="@RecMSE.CodMacchina">
            <div class="m-1 bg-black">
                <div class="card-img-overlay p-0 d-flex flex-row-reverse align-items-start rCTop">
                    <div class="labelTopDx px-2 w-100">
                        <div class="row">
                            <div class="col-3 text-start">
                                Art
                            </div>
                            <div class="col-9 text-end fw-bold">
                                @RecMSE.CodArticolo
                            </div>
                        </div>
                        <div class="row small">
                            <div class="col-6 text-start">
                                @($"PODL{RecMSE.IdxPOdl:00000000}")
                            </div>
                            <div class="col-6 text-end">
                                @($"ODL{RecMSE.IdxOdl:00000000}")
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card bg-black text-light p-0 rCBot">
                    <div class="row justify-content-center mx-0">
                        <div class="col-12 px-1">
                            <h4 class="text-start mb-0 fw-bold">
                                @RecMSE.Nome
                            </h4>
                        </div>
                        <div class="col-12 p-1 @RecMSE.Semaforo">
                            <div class="d-flex justify-content-between">
                                <div class="p-0 mr-auto">
                                    <b>@RecMSE.DescrizioneStato</b>
                                </div>
                                <div class="p-0">
                                    @(formatDurata(RecMSE.Durata))
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0 text-nowrap" style="font-size: 1.2em; line-height: 1.0em;">
                            <div class="row px-1 fw-bold" style="font-size:0.85em;">
                                <div class="col pe-0">
                                    <small class="text-success">Confermati</small>
                                </div>
                                <div class="col text-center px-0">
                                    <small class="text-warning">Prodotti</small>
                                </div>
                                <div class="col text-end ps-0">
                                    <small class="text-light">Ordinati</small>
                                </div>
                            </div>
                            <div class="row px-1">
                                <div class="col pe-0 text-success">
                                    @($"{RecMSE.PezziConf:N0}")
                                </div>
                                <div class="col text-center text-warning px-0">
                                    @($"{RecMSE.PezziProd:N0}")
                                </div>
                                <div class="col text-end ps-0">
                                    @($"{RecMSE.NumPezzi:N0}")
                                </div>
                            </div>
                            <div class="row">
                                <div class="col m-1">
                                    <ProdAdvDispl CountData="@CurrCount"></ProdAdvDispl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
    else
    {
        <div class="card mapBlock shadow @RecMSE.Semaforo p-0 m-0">
            <div class="m-1 bg-black">
                <div class="card-img-overlay p-0 d-flex flex-row-reverse align-items-start rCTop">
                    <div class="labelTopDx px-2 w-100">
                        <div class="row">
                            <div class="col-3 text-start">
                                Art
                            </div>
                            <div class="col-9 text-end fw-bold">
                                @RecMSE.CodArticolo
                            </div>
                        </div>
                        <div class="row small">
                            <div class="col-6 text-start">
                                @($"PODL{RecMSE.IdxPOdl:00000000}")
                            </div>
                            <div class="col-6 text-end">
                                @($"ODL{RecMSE.IdxOdl:00000000}")
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card bg-black text-light p-0 rCBot">
                    <div class="row justify-content-center mx-0">
                        <div class="col-12 px-1">
                            <h4 class="text-start mb-0 fw-bold">
                                @RecMSE.Nome
                            </h4>
                        </div>
                        <div class="col-12 p-1 @RecMSE.Semaforo">
                            <div class="d-flex justify-content-between">
                                <div class="p-0 mr-auto">
                                    <b>@RecMSE.DescrizioneStato</b>
                                </div>
                                <div class="p-0">
                                    @(formatDurata(RecMSE.Durata))
                                </div>
                            </div>
                        </div>
                        <div class="col-12 p-0 text-nowrap" style="font-size: 1.2em; line-height: 1.0em;">
                            <div class="row px-1 fw-bold" style="font-size:0.85em;">
                                <div class="col pe-0">
                                    <small class="text-success">Confermati</small>
                                </div>
                                <div class="col text-center px-0">
                                    <small class="text-warning">Prodotti</small>
                                </div>
                                <div class="col text-end ps-0">
                                    <small class="text-light">Ordinati</small>
                                </div>
                            </div>
                            <div class="row px-1">
                                <div class="col pe-0 text-success">
                                    @($"{RecMSE.PezziConf:N0}")
                                </div>
                                <div class="col text-center text-warning px-0">
                                    @($"{RecMSE.PezziProd:N0}")
                                </div>
                                <div class="col text-end ps-0">
                                    @($"{RecMSE.NumPezzi:N0}")
                                </div>
                            </div>
                            <div class="row">
                                <div class="col m-1">
                                    <ProdAdvDispl CountData="@CurrCount"></ProdAdvDispl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}