@model Tuple<IEnumerable<NewReminderASP.Domain.Entities.User>, System.Security.Claims.ClaimsPrincipal>

@{
    ViewBag.Title = "User List";
    //var roles = Model.Item2.Claims.Where(c => c.Type == ClaimTypes.Role).Select(c => c.Value).ToList();
}

<link href="~/styles.css" rel="stylesheet" />




<div class="form-container">
    <h2>User List</h2>
    
    <a href="@Url.Action("Create", "User", new { area = "AccountsArea" })" class="btn btn-primary">Create User</a>
    <a href="@Url.Action("CreateRole", "User", new { area = "AccountsArea" })" class="btn btn-primary">Create new  Role</a>
   



    <form action="@Url.Action("Index")" method="get">
        <div class="filter-bar">
            <label for="orderBy">Sort by:</label>
            <select id="orderBy" name="orderBy">
                <option value="Id">ID</option>
                <option value="Login">Login</option>
                <option value="Email">Email</option>
                <option value="Roles">Roles</option>
            </select>
            <label for="sortOrder">Order:</label>
            <select id="sortOrder" name="sortOrder">
                <option value="asc">Ascending</option>
                <option value="desc">Descending</option>
            </select>
            <input type="submit" value="Filter" class="btn" />
        </div>
        <table class="table-eco">
            <tr>
                <th>@Html.ActionLink("ID", "Index", new { orderBy = "Id", sortOrder = ViewBag.OrderBy == "Id" && ViewBag.SortOrder == "asc" ? "desc" : "asc" })</th>
                <th>@Html.ActionLink("Login", "Index", new { orderBy = "Login", sortOrder = ViewBag.OrderBy == "Login" && ViewBag.SortOrder == "asc" ? "desc" : "asc" })</th>
                <th>@Html.ActionLink("Email", "Index", new { orderBy = "Email", sortOrder = ViewBag.OrderBy == "Email" && ViewBag.SortOrder == "asc" ? "desc" : "asc" })</th>
                <th>@Html.ActionLink("Roles", "Index", new { orderBy = "Roles", sortOrder = ViewBag.OrderBy == "Roles" && ViewBag.SortOrder == "asc" ? "desc" : "asc" })</th>
            </tr>
            @foreach (var user in Model.Item1)
            {
                <tr onclick="redirectToDetails('@Url.Action("DetailsAdmin", "User", new { id = user.Id })')">
                    <td>@user.Id</td>
                    <td>@user.Login</td>
                    <td>@user.Email</td>
                    <td>
                        @foreach (var role in user.UserRoles)
                        {
                            <span>@role.Role.Name</span>
                        }
                    </td>
                </tr>
            }

        </table>

    </form>
    <div class="pagination">
        @if (ViewBag.CurrentPage > 1)
        {
            <a href="@Url.Action("Index", new { orderBy = ViewBag.OrderBy, sortOrder = ViewBag.SortOrder, page = ViewBag.CurrentPage - 1 })" class="btn btn-eco">Previous</a>
        }


        @for (var i = 1; i <= ViewBag.TotalPages; i++)
        {
            <a href="@Url.Action("Index", new { orderBy = ViewBag.OrderBy, sortOrder = ViewBag.SortOrder, page = i })" class="@(i == ViewBag.CurrentPage ? "active" : "")">@i</a>
        }

        @if (ViewBag.CurrentPage < ViewBag.TotalPages)
        {
            <a href="@Url.Action("Index", new { orderBy = ViewBag.OrderBy, sortOrder = ViewBag.SortOrder, page = ViewBag.CurrentPage + 1 })" class="btn btn-eco">Next</a>
        }

    </div>
</div>
<script>
    function redirectToDetails(url) {
        window.location.href = url;
    }
</script>
Напиши CSS для этого представления чтобы было красиво и удобно