<header class="workspace-header">
    <div class="header-row">
        <h1>@Title</h1>
        @if (User is null)
        {
            <p class="header-identity">
                <strong>Loading user...</strong>
            </p>
        }
        else
        {
            <p class="header-identity">
                <strong>@User.DisplayName</strong> <span class="muted">(@User.Username)</span>
            </p>
        }
        @if (ShowCampaign)
        {
            <p class="header-campaign">Campaign: <strong>@(CampaignName ?? "No campaign selected")</strong></p>
        }
        <div class="header-connection-cell">
            @if (ShowConnectionState)
            {
                <p class="connection @ConnectionStateCssClass">@ConnectionStateLabel</p>
            }
        </div>
        <a href="" class="logout-link" @onclick:preventDefault="true" @onclick="LogoutRequested">Logout</a>
        @if (MenuItems.Count > 0)
        {
            <div class="header-menu-wrap">
                <button
                    id="@MenuButtonId"
                    type="button"
                    class="menu-toggle"
                    aria-haspopup="true"
                    aria-expanded="@IsMenuOpen"
                    aria-controls="@MenuId"
                    @onclick="ToggleMenuRequested">
                    <span aria-hidden="true">☰</span>
                </button>
                @if (IsMenuOpen)
                {
                    <div id="@MenuId" class="screen-menu" role="menu" aria-labelledby="@MenuButtonId">
                        @foreach (var item in MenuItems)
                        {
                            <button type="button"
                                    class="menu-item @(item.IsActive ? "active" : string.Empty)"
                                    role="menuitem"
                                    @onclick="() => SelectMenuItemAsync(item)">
                                @item.Label
                            </button>
                        }
                    </div>
                }
            </div>
        }
    </div>
</header>
