@page "/teams"
@using AdminPanel.Models


<PageTitle>Teams Panel</PageTitle>

<MudPopover Open="@_isOpen" Fixed="true" Class="px-4 pt-4">
    <div class="d-flex flex-column">
        <MudForm @ref="form" @bind-IsValid="@success" @bind-Errors="@errors">
            <MudTextField T="string" Label="Name" Required="true" @bind-Value="FormName" RequiredError="Team's name is required!" />
            <MudTextField T="string" Label="Picture" Required="true" @bind-Value="FormPicture" RequiredError="Picture is required!"/>
            <MudTextField T="string" Label="MainColor" Required="true" @bind-Value="FormMainColor" RequiredError="Main color is required!"/>
            <MudTextField T="string" Label="SecondaryColor" Required="true" @bind-Value="FormSecondaryColor" RequiredError="Secondary color is required!"/>
            <div class="d-flex justify-center">
                <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@AddTeam" Class="ml-auto">Apply</MudButton>
                </div>
            </MudForm>   
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
    </div>
</MudPopover>
<MudCard>
    <MudCardContent>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">Ajouter</MudButton>
    </MudCardContent>
</MudCard>
<MudDataGrid T="Team" RowsPerPage="1" ServerData="GetTeamsFromServer">
    <Columns>
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.MainColor" />
        <PropertyColumn Property="x => x.SecondColor" />
        <PropertyColumn Property="x => x.Picture" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Team" PageSizeOptions="new []{1, 5, 10, 25, 50, 100}"/>
    </PagerContent>
</MudDataGrid>