@model UserWithRolesViewModel
@{
    ViewData["Title"] = "User Details";
}

<div class="mb-4">
    <a asp-action="Index" class="btn btn-secondary">&larr; Back to List</a>
</div>

@if (TempData["SuccessMessage"] != null)
{
    <div class="alert alert-success">@TempData["SuccessMessage"]</div>
}

@if (TempData["ErrorMessage"] != null)
{
    <div class="alert alert-danger">@TempData["ErrorMessage"]</div>
}

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h3 class="card-title mb-0">User Information: @Model.User.UserName</h3>
    </div>
    <div class="card-body">
        <dl class="row">
            <dt class="col-sm-3">ID</dt>
            <dd class="col-sm-9">@Model.User.Id</dd>

            <dt class="col-sm-3">Username</dt>
            <dd class="col-sm-9">@Model.User.UserName</dd>

            <dt class="col-sm-3">Email</dt>
            <dd class="col-sm-9">@Model.User.Email</dd>

            <dt class="col-sm-3">Roles</dt>
            <dd class="col-sm-9">
                @foreach (var role in Model.Roles)
                {
                    <span class="badge @(role == "Admin" ? "bg-danger" : "bg-info")">@role</span>
                }
            </dd>
        </dl>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Edit Roles</h5>
    </div>
    <div class="card-body">
        <form asp-action="UpdateRoles" asp-route-id="@Model.User.Id" method="post">
            @Html.AntiForgeryToken()
            <div class="d-flex gap-4 flex-wrap mb-3">
                @foreach (var role in Model.AllRoles)
                {
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox"
                               name="selectedRoles" value="@role" id="role_@role"
                               @(Model.Roles.Contains(role) ? "checked" : "") />
                        <label class="form-check-label" for="role_@role">@role</label>
                    </div>
                }
            </div>
            <button type="submit" class="btn btn-primary">Save Roles</button>
        </form>
    </div>
</div>