<div class="rr-app">
    <div class="workspace-shell">
        <AppHeader
            User="CurrentUser"
            ShowCampaign="false"
            ShowConnectionState="true"
            ConnectionStateLabel="@(!IsLoading && CurrentUser is not null ? "Connected" : "Offline fallback")"
            ConnectionStateCssClass="@(!IsLoading && CurrentUser is not null ? "ok" : "offline")"
            IsMenuOpen="IsScreenMenuOpen"
            MenuButtonId="admin-screen-menu-button"
            MenuId="admin-screen-menu"
            MenuItems="HeaderMenuItems"
            ToggleMenuRequested="ToggleScreenMenu"
            LogoutRequested="LogoutAsync"/>

        <main class="management-screen">
            <section class="card">
                <div class="section-head">
                    <h2>User Management</h2>
                </div>
                @if (!string.IsNullOrWhiteSpace(StatusMessage))
                {
                    <p class="@(StatusIsError ? "form-error" : "muted")">@StatusMessage</p>
                }
                @if (IsLoading)
                {
                    <p class="empty">Loading users...</p>
                }
                else if (!IsCurrentUserAdmin)
                {
                    <p class="empty">Admin role is required to manage users.</p>
                }
                else if (Users.Count == 0)
                {
                    <p class="empty">No users found.</p>
                }
                else
                {
                    <ul class="management-list">
                        @foreach (var user in Users)
                        {
                            <li>
                                <div>
                                    <strong>@user.Username</strong>
                                    <p class="muted">@user.DisplayName</p>
                                    <p class="muted">Roles: @(user.Roles.Count == 0 ? "none" : string.Join(", ", user.Roles))</p>
                                </div>
                                <div class="skill-chip-actions">
                                    <button type="button"
                                            class="chip-button"
                                            disabled="@(IsMutating || user.Id == CurrentUser?.Id)"
                                            @onclick="() => ToggleAdminRoleAsync(user)">
                                        <span aria-hidden="true" class="emoji">🛡️</span>
                                        <span class="sr-only">Toggle admin role for @user.Username</span>
                                    </button>
                                    <button type="button"
                                            class="chip-button"
                                            disabled="@(IsMutating || user.Id == CurrentUser?.Id)"
                                            @onclick="() => DeleteUserAsync(user)">
                                        <span aria-hidden="true" class="emoji">🗑️</span>
                                        <span class="sr-only">Delete user @user.Username</span>
                                    </button>
                                </div>
                            </li>
                        }
                    </ul>
                }
            </section>
        </main>
    </div>
</div>