@model List<VberAdmin.Web.Models.Modals.VmModalTab>
@{
    int i = 0;
}
@if (Model is {Count:>0})
{
    <ul class="nav nav-tabs nav-line-tabs tab-auto" role="tablist">
        @{
            string active;
            foreach (var tab in Model)
            {
                active = i == 0 ? "active" : "";
                <li class="nav-item">
                    <a class="nav-link @(active)" id="tab-nav_@(tab.Name)" data-bs-toggle="tab" href="#vb-tab_@(tab.Name)" >@(tab.DisplayName)</a>
                </li>
                i++;
            }
        }
    </ul>
    <div class="tab-content mt-3">
        @{
            i = 0;
            foreach (var tab in Model)
            {
                active = i == 0 ? "active" : "";
                <div class="tab-pane @(active) form-auto-tab" id="vb-tab_@(tab.Name)" data-tab-Name="tab-nav_@(tab.Name)" >
                    @if (!string.IsNullOrEmpty(tab.Content))
                    {
                        @Html.Raw(tab.Content)
                    }
                    @if (tab.InputGroups is {Count: > 0 })
                    {
                        foreach (var inputGroup in tab.InputGroups)
                        {
                            @await Html.PartialAsync("Input/_InputGroup",inputGroup )
                        }

                    }
                </div>
                i++;
            }
        }
    </div>
}