@if (isLoading)
{
    <LoadingData></LoadingData>
}
@if (ListRecord == null || ListRecord.Count == 0)
{
    <b>nessun record</b>
}
else
{
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <div>
                Famiglie Articoli
            </div>
            <div>
                <button type="button" data-bs-toggle="modal" data-bs-target="#modalNewFam" class="btn btn-sm btn-success"><i class="fa-solid fa-plus"></i>&nbsp; Aggiunta nuova famiglia</button>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr class="small">
                        @if (!editMode)
                        {
                            <th>

                            </th>
                        }
                        <th>
                            ID UNIVOCO
                        </th>
                        <th>
                            CATEGORIA
                        </th>
                        <th>
                            # ARTICOLI
                        </th>
                        <th>

                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in ListRecord)
                    {
                        <tr class="small">
                            @if (!editMode)
                            {
                                <td class="d-flex justify-content-center">
                                    <button class="btnDet" @onclick="()=>selectItem(item)" title=@($"Selezionare la famiglia di articoli: {item.Id}")><i class="fa-solid fa-magnifying-glass"></i></button>
                                    <button class="btnEdit" @onclick="()=>enableEdit(item.Id)" title=@($"Modificare la famiglia di articoli: {item.Id}")><i class="fa-solid fa-pen-to-square"></i></button>
                                </td>
                            }
                            <td>
                                @item.Id
                            </td>
                            <td>
                                @if (editMode && (item.Id == currRowSel))
                                {
                                    <input @bind="@item.Descr" />
                                }
                                else
                                {
                                    <div>
                                        @item.Descr
                                    </div>
                                }
                            </td>
                            <td>
                                @item.NumItems
                            </td>
                            <td class="text-center">
                                @if (item.NumItems == 0 && !editMode)
                                {
                                    <button class="btnDel" @onclick="()=>deleteItemFam(item)"><i class="fa-solid fa-trash-can"></i></button>
                                }
                                else if (editMode && (item.Id == currRowSel))
                                {
                                    <button class="btnAccept" @onclick="()=>editItemFam(item)"><i class="fa-solid fa-cloud-arrow-up"></i></button>
                                    <button class="btnDecline" @onclick="()=>disableEdit()"><i class="fa-solid fa-ban"></i></button>
                                }
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalNewFam" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="modalNewFamLabel">Aggiungere nuova famiglia articoli</h1>
                    <button type="button" class="btn-close" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-between">
                        <input placeholder="ID UNIVOCO" @bind=@idUnivoco />
                        <textarea placeholder="Descrizione" @bind=@descrizione></textarea>
                    </div>
                    <div class="text-center mt-5">
                        <button class="btnAccept"><i class="fa-regular fa-circle-check" @onclick="()=>addNewItem()"></i></button>
                        <button class="btnDecline"><i class="fa-solid fa-ban" data-bs-dismiss="modal"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

}