@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestPageModel

@{
    ViewData["Title"] = "Simple Tabs Example";
}

<h2>@ViewData["Title"]</h2>
<section id="tabs" class="project-tab">
    <div class="container-fluid">
<ul class="nav nav-tabs" id="gridTabs" role="tablist">
    @for (int i = 0; i < Model.Grids.Count; i++)
    {
        var grid = Model.Grids[i];
        <li class="nav-item">
            <a class="nav-link @(i == 0 ? "active" : "")"
               id="tab-@grid.Id.ToString()"
               data-toggle="tab"
               href="#content-@grid.Id.ToString()"
               role="tab">
                @grid.GridName
            </a>
        </li>
    }
</ul>

<div class="tab-content mt-3" id="gridTabContent">
    @for (int i = 0; i < Model.Grids.Count; i++)
    {
        var grid = Model.Grids[i];
        <div class="tab-pane fade @(i == 0 ? "show active" : "")"
             id="content-@grid.Id.ToString()"
             role="tabpanel">
            @await Component.InvokeAsync(grid.ViewComponentName, new { model = grid })
        </div>
    }
</div>

</div>
</section>