@page "/teams"
@using AdminPanel.Models
@using DataGridEditMode = MudBlazor.DataGridEditMode


<PageTitle>Teams Panel</PageTitle>

<h1>Team Panel</h1>


<MudPopover Open="@_isOpenAdd" Fixed="true" Class="px-4 pt-4">
    <div class="d-flex flex-column">
        <MudForm @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="@AddTeamConfirmed" 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>
        <ToolBarContent style="display: flex; justify-content: space-evenly;">
            <!--<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">Ajouter</MudButton>-->
            <div style="display: flex; align-items: center">
                <MudIconButton Icon="@Icons.Material.Filled.Add" OnClick="@ToggleOpen" Color="@Color.Success"/>
                <MudText>Add Team</MudText>
            </div>
            <div style="display: flex; align-items: center">
                <MudIconButton Icon="@Icons.Material.Filled.Remove" OnClick="@ToggleOpenConfirmation" Color="@Color.Error"/>
                <MudText>Remove selection</MudText>
            </div>
            <!--<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpenConfirmation">Supprimer</MudButton>-->
            <MudSpacer/>
            <MudText>Teams</MudText>
            <MudSpacer/>
        </ToolBarContent>
    </MudCard>


<MudPopover Open="@_isOpenConf" Fixed="true" Class="px-4 pt-4">
    <div class="d-flex flex-column">
         <Content>
                <p>Are you sure you want to delete this team(s)?</p>
            </Content>
        <Footer>
                <MudButton Variant="Variant.Outlined" Color="Color.Default" OnClick="@DeleteSelectedTeams">Confirm</MudButton>
                <MudButton Variant="Variant.Outlined" Color="Color.Default" OnClick="@CloseToggleConf">Close</MudButton>
        </Footer>
    </div>
</MudPopover>

<MudDataGrid
    T="Team"
    RowsPerPage="4"
    ServerData="GetTeamsFromServer"
    @ref="Grid"
    MultiSelection="true"
    @bind-SelectedItems="SelectedTeams"
    ReadOnly="false"
    EditMode="DataGridEditMode.Form"
    CommittedItemChanges="OnTeamUpdated">
    <Columns>
        <SelectColumn T="Team"/>
        <PropertyColumn 
            Property="x => x.Name"/>
        <PropertyColumn 
            Property="x => x.MainColor"/>
        <PropertyColumn 
            Property="x => x.SecondColor"/>
        <PropertyColumn 
            Property="x => x.Picture"/>
        <TemplateColumn>
            <CellTemplate>
                <MudIconButton Size="Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync"/>
            </CellTemplate>
        </TemplateColumn>
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Team" PageSizeOptions="new[] { 1, 2, 4, 10, 25, 50, 100 }"/>
    </PagerContent>
</MudDataGrid>