Four scenarios

@* FlexCore AG Grid Signature Showcase (Performance, Finance, HR, Inventory) *@
<div class="ag-suite-nav">
    <button class="ag-suite-tab-btn active">⚡ Performance (100k Rows)</button>
    <button class="ag-suite-tab-btn">📈 Finance & Market Ticker</button>
    <button class="ag-suite-tab-btn">👥 HR Org Directory (Tree Data)</button>
    <button class="ag-suite-tab-btn">📦 Inventory & Warehouses (Master-Detail)</button>
</div>

<!-- 1. 100k Rows Performance Stress Test -->
<GridControl TValue="AgPerformanceRow"
             DataSource="@_perfRows"
             AllowSorting="true"
             AllowSelection="true"
             AllowResizing="true"
             AllowFiltering="true"
             AllowGrouping="true"
             DefaultGroupsCollapsed="true"
             AutoPageRowThreshold="0"
             ShowGroupCount="true"
             ShowSearchBar="true"
             ShowRowCountInFooter="true"
             Height="480px">
    <GridColumnsBase>
        <GridColumn Field="Id" HeaderText="ID" Width="75px" TextAlign="TextAlign.Right" AllowGrouping="false" />
        <GridColumn Field="Project" HeaderText="Project" Width="150px" />
        <GridColumn Field="Task" HeaderText="Task Description" Width="210px" AllowGrouping="false" />
        <GridColumn Field="Assignee" HeaderText="Assignee" Width="130px" />
        <GridColumn Field="Priority" HeaderText="Priority" Width="100px" />
        <GridColumn Field="Status" HeaderText="Status" Width="115px" />
        <GridColumn Field="Progress" HeaderText="Progress" Width="120px" AllowGrouping="false" />
        <GridColumn Field="Budget" HeaderText="Budget" Width="110px" Format="$#,##0" AllowGrouping="false" />
        <GridColumn Field="ActualCost" HeaderText="Actual" Width="110px" Format="$#,##0" AllowGrouping="false" />
        <GridColumn Field="Variance" HeaderText="Variance" Width="110px" AllowGrouping="false" />
        <GridColumn Field="RiskLevel" HeaderText="Risk" Width="90px" />
        <GridColumn Field="DueDate" HeaderText="Due Date" Width="105px" Format="yyyy-MM-dd" AllowGrouping="false" />
    </GridColumnsBase>
</GridControl>

<!-- 2. Real-Time High-Frequency Financial Ticker with SVG Sparklines -->
<GridControl TValue="AgFinanceTickerRow"
             DataSource="@_financeRows"
             AllowSorting="true"
             Height="480px">
    <GridColumnsBase>
        <GridColumn Field="Ticker" HeaderText="Ticker" Width="90px" />
        <GridColumn Field="Name" HeaderText="Asset Name" Width="170px" />
        <GridColumn Field="Price" HeaderText="Price" Width="115px" />
        <GridColumn Field="Delta" HeaderText="Change ($)" Width="105px" />
        <GridColumn Field="Timeline" HeaderText="24h Trend" Width="135px">
            <Template>
                @{ var row = (AgFinanceTickerRow)context; }
                <svg class="ag-sparkline-svg" viewBox="0 0 110 24">
                    <polyline points="@GetSparklinePoints(row.Timeline)"
                              stroke="@GetSparklineStroke(row.Timeline)"
                              stroke-width="2" fill="none" />
                </svg>
            </Template>
        </GridColumn>
    </GridColumnsBase>
</GridControl>

<!-- 3. HR Organizational Tree Directory -->
<TreeGridControl TValue="AgHrEmployeeRow"
                 DataSource="@_allHrEmployees"
                 IdMapping="EmployeeID"
                 ParentIdMapping="ReportsToID"
                 TreeColumnIndex="0"
                 Height="480px">
    <TreeGridColumn Field="FullName" HeaderText="Employee Name" Width="280px" />
    <TreeGridColumn Field="JobTitle" HeaderText="Job Title" Width="220px" />
    <TreeGridColumn Field="Department" HeaderText="Department" Width="130px" />
    <TreeGridColumn Field="Salary" HeaderText="Base Salary" Width="120px" Format="$#,##0" />
</TreeGridControl>