@page "/admin/users"
@using Website.Client.Pages.Admin.UsersPage.Components
@using Website.Components.DataTable

<Title Value="@($"Manage Users - Unturned Store")"></Title>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Admin</li>
        <li class="breadcrumb-item active" aria-current="page">Users</li>
    </ol>
</nav>

<DataTable TItem="MUser" Data="Users">
    <DataTableTitle TItem="MUser">
        <div class="d-flex align-items-center">
            <div class="fs-5">
                Users (@context.Items.Count())
            </div>
        </div>        
    </DataTableTitle>
    <DataTableColumn TItem="MUser" Name="ID" Field="x => x.Id" IsSearchable="true" SearchType="ESearchType.Exact" />
    <DataTableColumn TItem="MUser" Name="Name" Field="x => x.Name" IsSearchable="true" SearchType="ESearchType.Contains" Context="user">
        <div class="d-flex align-items-center">
            <div>
                <img class="rounded-circle" src="/api/images/@user.AvatarImageId" width="30" height="30" />
            </div>
            <div class="ms-2">
                <a href="/users/@user.Id" class="text-decoration-none">
                    @user.Name
                </a>
            </div>
        </div>
    </DataTableColumn>
    <DataTableColumn TItem="MUser" Name="SteamID" Field="x => x.SteamId" Context="user" IsSearchable="true" SearchType="ESearchType.Exact">
        <a class="text-decoration-none" href="@user.SteamProfileUrl" target="_blank">
            @user.SteamId
        </a>
    </DataTableColumn>
    <DataTableColumn TItem="MUser" Name="Role" Field="x => x.Role" Context="user" IsSearchable="true" />
    <DataTableColumn TItem="MUser" Name="Joined" Field="x => x.CreateDate.ToShortDateString()" Context="user" IsSearchable="false" />    
    <DataTableColumn TItem="MUser" Name="" Context="user" Field="x => string.Empty" IsSearchable="false">
        <div class="d-flex">
            <div>
                <button class="btn btn-outline-success btn-sm" @onclick="() => ShowUserAsync(user)">
                    <i class="fas fa-edit"></i>
                </button>
            </div>                  
        </div>                
    </DataTableColumn>
</DataTable>

<UserModal @ref="UserModal" OnUpdate="StateHasChanged" />