@using static WebWindowComplex.LayoutConst

<table class="table table-sm table-hover align-middle shadow table-borderless">
    <colgroup>
        @for (int i = 0; i < maxCol; i++)
        {
            <col style="min-width: 120px;" />
        }
    </colgroup>
    <tbody>
        @for (int i = 0; i < ItemTableList.Count; i++)
        {
            <tr>
                @for (int j = 0; j < maxCol; j++)
                {
                    var index = RowCollapsedDict.Keys.Order().Where(k => k <= i).LastOrDefault();
                    @if ((RowCollapsedDict.ContainsValue(true) && RowCollapsedDict.GetValueOrDefault(index))
                                && i - 1 > 0 && ItemTableList.ElementAt(i).Col > ItemTableList.ElementAt(index-1).Col){
                        continue;
                    }
                    else
                    {
                        CompileStep cs = CompileStep.Frame;
                        int row = i;
                        int ind = -1;
                        string s = "Vai a step ";
                        @if (j + 1 == ItemTableList[i].Col)
                        {
                            @if (ItemTableList[i].Type is Json.WindowConst.AreaTypes.FRAME)
                            {
                                cs = CompileStep.Frame;
                                s = s + cs.ToString();
                            }
                            else if (ItemTableList[i].Type is Json.WindowConst.AreaTypes.SPLIT)
                            {
                                cs = CompileStep.Split;
                                ind = ItemTableList[i].IndexItem;
                                s = s + cs.ToString() + ((ind + 1) > 0 ? (ind + 1): "");
                            }
                            else if (ItemTableList[i].Type is Json.WindowConst.AreaTypes.SASH)
                            {
                                cs = CompileStep.Sash;
                                ind = ItemTableList[i].IndexItem;
                                s = s + cs.ToString() + ((ind + 1) > 0 ? (ind + 1) : "");
                            }
                            else if (ItemTableList[i].Type is Json.WindowConst.AreaTypes.FILL)
                            {
                                cs = CompileStep.Fill;
                                ind = ItemTableList[i].IndexItem;
                                s = s + cs.ToString() + ((ind + 1) > 0 ? (ind + 1) : "");
                            }
                            <td colspan="2">
                                @*  <div class="d-flex flex-row align-items-center justify-content-center">*@
                                <div class="card text-center p-1 shadow-sm hover-shadow w-100">
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-sm btn-rounded flex-grow-1" @onclick="() => RaiseNextStep(cs, ind)" title="@(s)"
                                                style="font-size: 1rem;flex-basis: 80%;">
                                                @ItemTableList[i].Desc
                                        </button>
                                        @if (ItemTableList[row].NumChild > 4)
                                        {
                                            <button class="btn btn-sm" @onclick="() => ChangeCollapsed(ItemTableList[row].Row)"
                                                    style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem; flex-basis: 20%;">
                                                        <i class="@hwIcon(ItemTableList[i].Row)" style="width:0.5rem;"></i>
                                            </button>
                                        }
                                        @if (ItemTableList[i].Type is Json.WindowConst.AreaTypes.SASH ||
                                             ItemTableList[i].Type is Json.WindowConst.AreaTypes.SPLIT)
                                        {
                                            <button class="btn btn-sm" style="font-size: 1rem; flex-basis: 20%;" @onclick="() => Remove(cs, ind)" title="Remove">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        }
                                    </div>
                                </div>
                                    @* <div class="card text-center m-1 p-1 shadow-sm hover-shadow">
                                        <button class="btn btn-sm btn-danger btn-rounded"
                                                style="font-size: 1rem;">
                                            <i class="bi bi-trash3-fill"></i>
                                        </button>
                                    </div> *@
                                @* </div> *@
                            </td>
                        }
                        else
                        {
                            @* <td>@FillTable(i, j)</td> *@
                            <td> </td>
                        }
                    }
                }
            </tr>
        }
    </tbody>
</table>