@if (ShowDetail)
{
    <div class="card">
        <div class="card-header text-light bg-dark bg-gradient">
            <div class="row">
                <div class="col fs-5">
                    Tabella Config - Confronto dati
                </div>
                <div class="col text-center">
                    <CmpCompType EC_filtUpd="SetFilter"></CmpCompType>
                </div>
                <div class="col">
                    <button class="btn btn-primary w-100" @onclick="ResetCompare">Chiudi</button>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if (isLoading)
            {
                <LoadingData></LoadingData>
            }
            else
            {
                <table class="table table-striped table-sm text-start">
                    <thead>
                        <tr class="">
                            <th>Remoto</th>
                            <th class="text-nowrap">Chiave</th>
                            <th class="text-nowrap">Valore</th>
                            <th class="text-nowrap">Valore Std</th>
                            <th class="text-nowrap">Note</th>
                            <th class="text-nowrap">Locale</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in ListCompare)
                        {
                            <tr class="@genClass(item)">
                                <td>
                                    @if (!item.IsEqual)
                                    {
                                        if (!item.DestExist)
                                        {
                                            <button class="btn w-100 btn-success btn-sm py-0" @onclick="() => LocalAdd(item)" title="Aggiunta record std">Add</button>
                                        }
                                        else if (item.SrcExist)
                                        {
                                            <button class="btn w-100 btn-primary btn-sm py-0" @onclick="() => LocalUpd(item)" title="Aggiorna ValoreStd e Note">Mod</button>
                                        }
                                    }
                                </td>
                                <td class="@genClass(item)">
                                    @item.NomeVar
                                </td>
                                <td>
                                    @if (item.SrcExist)
                                    {
                                        <div class="text-dark textTrim max10Char" title="@item.Source.Valore">@item.Source.Valore</div>
                                    }
                                    @if (!item.IsEqual && item.DestExist)
                                    {
                                        string locCss = item.Source.Valore.Equals(item.Dest.Valore) ? "text-secondary" : "text-danger";
                                        <div class="@locCss textTrim max10Char" title="@item.Dest.Valore">@item.Dest.Valore</div>
                                    }
                                </td>
                                <td>
                                    @if (item.SrcExist)
                                    {
                                        <div class="text-dark textTrim max10Char" title="@item.Source.ValoreStd">@item.Source.ValoreStd</div>
                                    }
                                    @if (!item.IsEqual && item.DestExist)
                                    {
                                        string locCss = item.Source.ValoreStd.Equals(item.Dest.ValoreStd) ? "text-secondary" : "text-danger";
                                        <div class="@locCss textTrim max10Char" title="@item.Dest.ValoreStd">@item.Dest.ValoreStd</div>
                                    }
                                </td>
                                <td>
                                    @if (item.SrcExist)
                                    {
                                        <div class="text-dark">@item.Source.Note</div>
                                    }
                                    @if (!item.IsEqual && item.DestExist)
                                    {
                                        string locCss = item.Source.Note.Equals(item.Dest.Note) ? "text-secondary" : "text-danger";
                                        <div class="@locCss">@item.Dest.Note</div>
                                    }
                                </td>
                                <td>
                                    @if (item.DestExist)
                                    {
                                        <button class="btn w-100 btn-danger btn-sm py-0" @onclick="() => LocalDelete(item)">Rem</button>
                                    }
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            }
        </div>
        <div class="card-footer p-1">
            <DataPager PageSize="@numRecord" currPage="@currPage" numRecordChanged="SetNumRec" numPageChanged="SetPage" totalCount="@totalCount" showLoading="@isLoading" />
        </div>
    </div>
}
else
{
    <ul class="list-group">
        <li class="list-group-item active">
            Tabella Config
        </li>
        <li class="list-group-item">
            <div class="d-flex justify-content-between">
                <div class="px-1">Remote #</div>
                <div class="px-1">Record</div>
                <div class="px-1">Local #</div>
            </div>

        </li>
        <li class="list-group-item font-weight-bold display-4">
            <div class="d-flex justify-content-between">
                <div class="px-1">@numRem</div>
                <div class="px-1"><i class="fas fa-arrows-alt-h"></i></div>
                <div class="px-1">@numLoc</div>
            </div>
        </li>
        <li class="list-group-item">
            <button class="btn btn-primary w-100" @onclick="ReqCompare">Sync</button>
        </li>
    </ul>
}