<FilterMenuTemplate>
    <TelerikMultiSelect Value="@(AlreadySelectedFilterValues(context.FilterDescriptor))"
                        OnRead="@OnReadWrapper"
                        ValueMapper="@ValueMapperWrapper"
                        TItem="@FilterItemDto" 
                        TValue="@TFilterValue"
                        ValueField="@nameof(FilterItemDto.Id)"
                        TextField="@nameof(FilterItemDto.Name)"
                        AutoClose="true"
                        Filterable="true"
                        ClearButton="true"
                        DebounceDelay="500"
                        OnChange="@((object newValue) => OnMenuFilterChange(newValue, context))"/>
</FilterMenuTemplate>

<TabStripTab Title="@tabName">
	@((MarkupString)tabHeading)
				
	<TelerikTileLayout Columns="6"
						RowHeight="225px"
						ColumnWidth="285px"
						Reorderable="true"
						Resizable="true"
						OnResize="@ItemResize"
						OnReorder="@ItemReorder"
						@ref="@TileLayout">
		<TileLayoutItems>
			@foreach (CustomChartViewModel chart in tab.Charts)
			{
				int colSpan = 2;
				int rowSpan = 2;

				<TileLayoutItem RowSpan="@rowSpan" ColSpan="@colSpan">
					<HeaderTemplate>
						<div style="text-align: right">
							<TelerikButton OnClick="@(() => onDeleteChart(chart.Id, tab.Id))">X</TelerikButton>
						</div>
					</HeaderTemplate>	
					<Content>
						<ChartComponent ViewModel="@chart" @ref="@charts[chart.Id]" />
					</Content>
				</TileLayoutItem>
			}
		</TileLayoutItems>
	</TelerikTileLayout>
</TabStripTab>

<TelerikChart @ref="@ChartRef" Height="100%" Width="100%" OnSeriesClick="@OnSeriesClickHandler">
	<ChartTooltip Visible="true">
		<Template>
			<TelerikIcon Icon="information" />
                    @(context.Percentage.ToString("P", nfi))<br />
					@((context.DataItem as MyDataModel).toolTip)
		</Template>
	</ChartTooltip>
	<ChartSeriesItems>
		<ChartSeries Type="ChartSeriesType.Donut" Data="@Data" Field="value" CategoryField="category" ColorField="color">
			<ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
							   Visible="@ViewModel.ShowLabels"
							   Background="transparent"
							   Template="#= category #: #= value#">
			</ChartSeriesLabels>
		</ChartSeries>
	</ChartSeriesItems>

	<ChartTitle Text="@ViewModel.Name"></ChartTitle>

	<ChartLegend Position="ChartLegendPosition.Bottom" Visible="@ViewModel.ShowLegend"></ChartLegend>
</TelerikChart>

<TelerikGrid Id="@(Utility.CleanCssId("CrewGrid"))"
                 DetailTemplate="GridDetailTemplate"
                 EnableLoaderContainer="@ShowLoading"
                 Groupable="false"
                 Height="100%"
                 OnRead="@OnGridRead"
                 OnStateChanged="@OnGridStateChanged"
                 OnStateInit="@OnGridStateInit"
                 Pageable="true"
                 PageSize="@PageSize"
                 PageSizeChanged="@OnGridPageSizeChanged"
                 Reorderable="IsLargeScreen"
                 Resizable="IsLargeScreen"
                 SelectionMode="GridSelectionMode.Single"
                 ShowColumnMenu="IsLargeScreen"
                 Size="@GetGridSize"
                 Sortable="true"
                 SortMode="SortMode.Multiple"
                 TItem="CrewListItem"
                 @ref="Grid"
                 @bind-SelectedItems="@SelectedItems"
                 OnRowRender="OnRowRender">
    <NoDataTemplate>
        <strong>@RecordsMessage</strong>
    </NoDataTemplate>
    <GridSettings>
        <GridColumnMenuSettings Lockable="false" FilterMode="ColumnMenuFilterMode.None" />
        <GridPagerSettings InputType="PagerInputType.Buttons" PageSizes="@PageSizes" ButtonCount="5" Adaptive="false" Position="PagerPosition.Bottom" />
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@nameof(CrewListItem.Color)"
                    Width="@(IsLargeScreen ? "40px" : "50px")"
                    Resizable="false"
                    ShowColumnMenu="false"
                    Groupable="false"
                    ShowColumnChooser="false"
                    Sortable="false"
                    HeaderClass="k-text-transparent"
                    OnCellRender="OnGridCellRender">
            <Template>
                @{
                    var item = (CrewListItem)context;
                    <M360ListColumnColor Color="@item.Color" IsLargeScreen="IsLargeScreen" />
                }
            </Template>
        </GridColumn>
        <GridColumn Field="@nameof(CrewListItem.Name)" Title="@TMessages.Crew" OnCellRender="OnGridCellRender" VisibleInColumnChooser="false">
            <Template>
                @{
                    var item = (CrewListItem)context;
                    <div class="k-d-flex k-h-full @(IsLargeScreen ? "k-align-items-stretch" : "k-align-items-center")">
                        <M360ListColumnLink Url="@string.Concat("crew/", item.Id)" Text="@item.Name" EntityType="Crew" IsPrimary="true" />
                    </div>
                }
            </Template>
        </GridColumn>
        <GridColumn Field="@nameof(CrewListItem.DivisionsJson)" Title="Division(s)" Sortable="true" Visible="IsLargeScreen" OnCellRender="OnGridCellRender">
            <Template>
                @{
                    var item = (CrewListItem)context;
                    <M360ListColumnList Items="@item.Divisions.ToList()" />
                }
            </Template>
        </GridColumn>
         .
         .
         .
    </GridColumns>
</TelerikGrid>

<tbody class="k-table-tbody" role="rowgroup">
  <tr
    role="row"
    class="k-master-row k-table-row k-alt k-table-alt-row"
    data-render-row-index="0"
    aria-rowindex="1"
  >
    . . .
  </tr>
  <tr
    role="row"
    class="k-master-row k-table-row k-alt k-table-alt-row"
    data-render-row-index="1"
    aria-rowindex="3"
  >
    . . .
  </tr>
  <tr
    role="row"
    class="k-master-row k-table-row k-alt k-table-alt-row"
    data-render-row-index="2"
    aria-rowindex="5"
  >
    . . .
  </tr>
  . . .
</tbody>

<TelerikStepper Linear="true" ValueChanged="@HandleValueChanged">
    <StepperSteps>
        @for (int i = 0; i < IsValidArray.Length; i++)
        {
            <StepperStep Valid="@IsValidArray[i]"></StepperStep>
        }
    </StepperSteps>
</TelerikStepper>

@code {
    bool?[] IsValidArray = [null, null, null, null];

    public void HandleValueChanged(int index)
    {
        for (int i = 0; i < IsValidArray.Length; i++)
        {
            IsValidArray[i] = index > i ? true : null;
        }
    }
}