@*
    La firma visiva di "Offline e' la verita'": una striscia sottile ancorata in
    cima che scende quando lo stato di rete cambia. Mai il solo colore: sempre
    icona piu' etichetta, leggibile anche in pieno sole.
*@

<div class="connection @(ShowWarning ? "connection--show" : "") @ToneClass"
     role="status" aria-live="polite">
    <i class="@IconClass" aria-hidden="true"></i>
    <span>@Label</span>
</div>

@code{
    [Parameter] public bool IsNetworkAvailable { get; set; }
    [Parameter] public bool ServicesIsDown { get; set; }
    [Parameter] public bool ShowWarning { get; set; }

    private string ToneClass => !IsNetworkAvailable
        ? "connection--offline"
        : ServicesIsDown
            ? "connection--down"
            : "connection--ok";

    private string IconClass => !IsNetworkAvailable
        ? "ri-wifi-off-line"
        : ServicesIsDown
            ? "ri-cloud-off-line"
            : "ri-cloud-line";

    private string Label => !IsNetworkAvailable
        ? "Nessuna connessione · il lavoro resta sul dispositivo"
        : ServicesIsDown
            ? "Servizi non raggiungibili"
            : "Di nuovo online";
}