@model IEnumerable<UserWithRolesViewModel>
@{
    ViewData["Title"] = "User Management";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Users</h1>
</div>

<table class="table table-striped table-hover">
    <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>Email</th>
            <th>Roles</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var vm in Model)
        {
            <tr>
                <td>@vm.User.Id</td>
                <td>@vm.User.UserName</td>
                <td>@vm.User.Email</td>
                <td>
                    @foreach (var role in vm.Roles)
                    {
                        <span class="badge @(role == "Admin" ? "bg-danger" : "bg-info")">@role</span>
                    }
                </td>
                <td>
                    <a asp-action="Details" asp-route-id="@vm.User.Id" class="btn btn-sm btn-outline-primary">Details</a>
                </td>
            </tr>
        }
    </tbody>
</table>