@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudDataGrid T="Element" @ref="grid" Items="@_elements" DragDropColumnReordering="@_dragDropReorderingEnabled" ColumnsPanelReordering="@_columnsPanelReorderingEnabled"
             ColumnResizeMode="ResizeMode.Container" Hideable="@_hideable" Filterable="@_filterable" Groupable="@_groupable" FilterMode="@_filterMode" ShowMenuIcon="true">
    <Columns>
        <SelectColumn T="Element"/>
        <PropertyColumn Property="x => x.Number" Title="Nr" />
        <PropertyColumn Property="x => x.Sign" Hidden="true" DragAndDropEnabled="false" Groupable="false" Sortable="false" Filterable="false" />
        <PropertyColumn Property="x => x.Name" Title="Name" Hidden="false" DragAndDropEnabled="true" Groupable="true" Sortable="true" Filterable="true" />
        <PropertyColumn Property="x => x.Position" Filterable="false" Hideable="false" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" Hideable="true" />
        <PropertyColumn Property="x => x.Group" Title="Category" @bind-Grouping="@_group" />
        <TemplateColumn Title="Template" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Element" />
    </PagerContent>
</MudDataGrid>

<div class="d-flex flex-rows flex-wrap mr-4">
    <MudSwitch @bind-Checked="@_dragDropReorderingEnabled" Color="Color.Primary">Drag Drop Column Reordering</MudSwitch>
    <MudSwitch @bind-Checked="@_columnsPanelReorderingEnabled" Color="Color.Primary">Columns Panel Column Reordering</MudSwitch>
    <MudSwitch @bind-Checked="@_hideable" Color="Color.Primary">Hideable</MudSwitch>
    <MudSwitch @bind-Checked="@_filterable" Color="Color.Primary">Filterable</MudSwitch>
    <MudSwitch @bind-Checked="@_groupable" Color="Color.Primary">Groupable</MudSwitch>    
    <MudSwitch @bind-Checked="@_group" Color="Color.Primary">Group Category</MudSwitch>   
</div>

<div class="d-flex flex-wrap mt-4">
    <MudRadioGroup T="DataGridFilterMode" @bind-SelectedOption="@_filterMode">
        <MudRadio Dense="true" Option="@DataGridFilterMode.Simple" Color="Color.Primary">Simple</MudRadio>
        <MudRadio Dense="true" Option="@DataGridFilterMode.ColumnFilterMenu" Color="Color.Tertiary">Column Menu</MudRadio>
        <MudRadio Dense="true" Option="@DataGridFilterMode.ColumnFilterRow">Column Row</MudRadio>
    </MudRadioGroup>
</div>
@code {
    IEnumerable<Element> _elements = new List<Element>();

    DataGridFilterMode _filterMode = DataGridFilterMode.Simple;
    bool _dragDropReorderingEnabled = true;
    bool _columnsPanelReorderingEnabled = true;
    bool _hideable = true;
    bool _filterable = true;
    bool _groupable = true;
    bool _group = true;
    public MudDataGrid<Element> grid = null;

    protected override async Task OnInitializedAsync()
    {
        _elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}