@page "/Users"
@using GameIdeas.BlazorApp.Pages.Games.Header
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Pages.Users.Components
@using GameIdeas.BlazorApp.Shared.Components.Popup
@using GameIdeas.BlazorApp.Shared.Components.Popup.Components
@using GameIdeas.BlazorApp.Shared.Components.Search
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
@using GameIdeas.Shared.Dto

@layout MainLayout

<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>

<GameHeader DisplayAdd="false">
    <div class="header-content">
        <SearchInput Placeholder="@ResourcesKey.EnterUsername" @bind-Text="FilterParams.Name" @bind-Text:after=HandleFilterChanged />
        <SelectSearch TItem="RoleDto" Placeholder="@ResourcesKey.Roles" @bind-Values="FilterParams.Roles" @bind-Values:after=HandleFilterChanged
                      Items="Roles.ToList()" GetLabel="@(role => role.Name)" Theme="SelectTheme.Filter" />
    </div>
</GameHeader>

<div class="container">
    <UserRow User="UserAdd" Roles="Roles.ToList()" CanEdit="false" IsEditing="true" OnRemove="HandleResetUser" OnSubmit="HandleSubmitUser" Validator="@(new UserCreateValidator())" />

    <span class="line"></span>

    <div class="content">
        @if (!IsLoading)
        {
            @foreach (var user in UserList.Users ?? [])
            {
                <UserRow User="user" Roles="Roles.ToList()" OnRemove="HandleOpenConfirmationPopup" OnSubmit="HandleUpdateUser" Validator="@(new UserUpdateValidator())" />
            }
        }
        else
        {
            @for (int i = 0; i < 20; i++)
            {
                <UserRowSkeleton />
            }
        }
    </div>
</div>

<Popup @ref=Popup Closable=false>
    <ConfirmDelete OnCancel="HandleCancelPopupClicked" OnConfirm="HandleRemoveUser" />
</Popup>