@using RpgRoller.Components.Pages.HomeControls
<div class="@AppCssClass">
    <p class="sr-only" aria-live="polite">@State.LiveAnnouncement</p>

    @if (State.HasHealthIssue)
    {
        <section class="health-banner" role="alert">
            <div>
                <strong>API currently unavailable.</strong>
                <p>@State.HealthIssueMessage</p>
            </div>
            <button type="button" @onclick="Session.RetryAfterHealthIssueAsync">Retry</button>
        </section>
    }

    <div class="workspace-shell">
        <AppHeader
            User="State.User"
            ShowCampaign="@ShowCampaignInHeader"
            Campaigns="State.Campaigns"
            SelectedCampaignId="State.SelectedCampaignId"
            CampaignSelectionChanged="OnHeaderCampaignSelectionChangedAsync"
            ShowConnectionState="@ShowConnectionStateInHeader"
            ConnectionStateLabel="@State.ConnectionStateLabel"
            ConnectionStateCssClass="@State.ConnectionStateCssClass"
            IsMenuOpen="State.IsScreenMenuOpen"
            MenuButtonId="workspace-screen-menu-button"
            MenuId="workspace-screen-menu"
            MenuItems="HeaderMenuItems"
            ToggleMenuRequested="ToggleScreenMenu"
            LogoutRequested="Session.LogoutAsync"/>

        @if (ChildContent is not null)
        {
            @ChildContent(PageContext)
        }
    </div>

    @if (State.Toasts.Count > 0)
    {
        <div class="toast-stack" aria-live="polite" aria-atomic="false">
            @foreach (var toast in State.Toasts)
            {
                <div class="toast @(toast.IsError ? "error" : "success")" role="status">
                    <p>@toast.Message</p>
                </div>
            }
        </div>
    }
</div>
