@model UsersViewModel
@{
    ViewData.SetActivePage(ServerNavPages.Users);
    var nextUserEmailSortOrder = (string)ViewData["NextUserEmailSortOrder"];
    String userEmailSortOrder = null;
    switch (nextUserEmailSortOrder)
    {
        case "asc":
            userEmailSortOrder = "desc";
            break;
        case "desc":
            userEmailSortOrder = "asc";
            break;
    }

    var sortIconClass = "fa-sort";
    if (userEmailSortOrder != null)
    {
        sortIconClass = $"fa-sort-alpha-{userEmailSortOrder}";
    }

    var sortByDesc = "Sort by descending...";
    var sortByAsc = "Sort by ascending...";
}

<h3 class="mb-4">@ViewData["Title"]</h3>

<div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
    <form asp-action="ListUsers" asp-route-sortOrder="@(userEmailSortOrder)">
        <div class="input-group mb-2">
            <input asp-for="SearchTerm" class="form-control" placeholder="Search by email..." />
            <button type="submit" class="btn btn-secondary" title="Search by email">
                <span class="fa fa-search"></span> Search
            </button>
        </div>
        <span asp-validation-for="SearchTerm" class="text-danger"></span>
    </form>
    <a asp-action="CreateUser" class="btn btn-primary mb-2" role="button" id="CreateUser">
        <span class="fa fa-plus"></span>
        Add User
    </a>
</div>
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>
                <a
                    asp-action="ListUsers"
                    asp-route-sortOrder="@(nextUserEmailSortOrder ?? "asc")"
                    class="text-nowrap"
                    title="@(nextUserEmailSortOrder == "desc" ? sortByAsc : sortByDesc)"
                >
                    Email
                    <span class="fa @(sortIconClass)" />
                </a>
            </th>
            <th>Created</th>
            <th>Verified</th>
            <th class="text-end">Actions</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var user in Model.Users)
        {
            <tr>
                <td class="d-flex align-items-center">
                    <span class="me-2">@user.Email</span>
                    @foreach (var role in user.Roles)
                    {
                        <span class="badge bg-info">@Model.Roles[role]</span>
                    }
                </td>
                <td>@user.Created?.ToBrowserDate()</td>
                <td class="text-center">
                    @if (user.Verified)
                    {
                        <span class="text-success fa fa-check"></span>
                    }
                    else
                    {
                        <span class="text-danger fa fa-times"></span>
                    }
                </td>
                <td class="text-end">
                    <a asp-action="User" asp-route-userId="@user.Id">Edit</a> <span> - </span> <a asp-action="DeleteUser" asp-route-userId="@user.Id">Remove</a>
                </td>
            </tr>
        }
        </tbody>
    </table>
</div>

<vc:pager view-model="Model"></vc:pager>