@page "/users"
@using AdminPanel.Models
@using System.ComponentModel.DataAnnotations

<PageTitle>User Panel</PageTitle>

<h1>User Panel</h1>

<div id="users-div">

    <MudOverlay Visible="IsAddingUser" DarkBackground>
        <MudForm id="add-account-form">
            <MudTextField T="string"
                          Label="Name"
                          @bind-Value="FormAccountName"
                          Required
                          Validation="@(VerifyLength(6, 256))"/>
            <MudTextField T="string"
                          Label="Email"
                          @bind-Value="FormAccountEmail"
                          Required
                          Validation="@(new EmailAddressAttribute() { ErrorMessage = "The email address is invalid" })"/>
            <MudTextField T="string"
                          InputType="InputType.Password"
                          Label="Password"
                          @bind-Value="FormAccountPassword"
                          Validation="@(VerifyLength(6, 256))"
                          Required/>
            <MudCheckBox T="bool" Label="Is Administrator" @bind-Value="FormAccountIsAdmin"/>

            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(() => IsAddingUser = false)">Cancel</MudButton>
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ConfirmAddAccount">Add Account</MudButton>
        </MudForm>
    </MudOverlay>


    <MudDataGrid
        T="User"
        @ref="Grid"
        ServerData="LoadUsersFromServer"
        MultiSelection="true"
        ColumnResizeMode="ResizeMode.Column"
        RowsPerPage="10"
        ReadOnly="false"
        EditMode="DataGridEditMode.Form"
        @bind-SelectedItems="SelectedItems"
        CommittedItemChanges="OnAccountUpdated">

        <ToolBarContent>
            <div style="display: flex; align-items: center">
                <MudIconButton Icon="@Icons.Material.Filled.Add" OnClick="@(() => IsAddingUser = true)" Color="@Color.Success" Class="add-item-btn"/>
                <MudText Align="Align.Center">Add Account</MudText>
            </div>
            <div style="display: flex; align-items: center">
                <MudIconButton Icon="@Icons.Material.Filled.Remove" OnClick="RemoveSelection" Color="@Color.Error" Class="remove-item-btn"/>
                <MudText Align="Align.Center">Remove Selection</MudText>
            </div>
            <MudSpacer/>
            <MudText>Accounts</MudText>
            <MudSpacer/>
            <MudTextField
                T="string"
                @bind-Value="SearchString"
                OnKeyDown="@ValidateSearch"
                Placeholder="Search an email or a name"
                AdornmentIcon="@Icons.Material.Filled.Search"
                Immediate
                IconSize="Size.Medium"/>
        </ToolBarContent>

        <Columns>
            <SelectColumn T="User"/>
            <PropertyColumn Property="x => x.Name" Required/>
            <PropertyColumn Property="x => x.Email" Title="Email Address" Required/>
            <TemplateColumn Title="Is Administrator">
                <CellTemplate>
                    <MudCheckBox Value="@context.Item!.IsAdmin" ReadOnly/>
                </CellTemplate>
                <EditTemplate>
                    <MudText>Is Administrator :</MudText>
                    <MudCheckBox @bind-Value="context.Item.IsAdmin"/>
                </EditTemplate>
            </TemplateColumn>
            <PropertyColumn Property="x => x.Id" IsEditable="false"/>
            <TemplateColumn>
                <CellTemplate>
                    <MudIconButton Size="Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync"/>
                </CellTemplate>
            </TemplateColumn>
        </Columns>
        <PagerContent>
            <MudDataGridPager T="User" PageSizeOptions="new[] { 1, 2, 4, 10, 25, 50, 100 }"/>
        </PagerContent>
    </MudDataGrid>
</div>