RpgRoller/RpgRoller/Components/Pages/HomeControls/CampaignManagementPanel.razor

<main class="management-screen">
    <section class="card">
        <div class="section-head">
            <h2>Campaign</h2>
        </div>
        @if (Campaigns.Count == 0)
        {
            <p class="empty">No campaigns yet.</p>
        }
        else
        {
            <label for="campaign-select">Current campaign</label>
            <select id="campaign-select" @onchange="CampaignSelectionChanged">
                @foreach (var campaign in Campaigns)
                {
                    <option value="@campaign.Id" selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId), GM: @campaign.Gm.DisplayName, @campaign.CharacterCount characters</option>
                }
            </select>
        }

        <button type="button"
                class="add-row-button"
                disabled="@(IsMutating || IsCreatingCampaign)"
                @onclick="OpenCreateCampaignModal">
            <span class="add-row-icon" aria-hidden="true">+</span>
            <span>Add campaign</span>
        </button>

        <button type="button"
                class="ghost"
                disabled="@(IsMutating || IsCreatingCampaign || !CanDeleteCampaign)"
                @onclick="DeleteCampaignRequested">
            Delete current campaign
        </button>
    </section>

    <section class="card">
        <div class="section-head">
            <h2>Character Management</h2>
        </div>
        @if (SelectedCampaign is null)
        {
            <p class="empty">Select a campaign first.</p>
        }
        else
        {
            @if (SelectedCampaign.Characters.Length == 0)
            {
                <p class="empty">No characters in this campaign yet.</p>
            }
            else
            {
                <ul class="management-list">
                    @foreach (var character in SelectedCampaign.Characters)
                    {
                        <li>
                            <div>
                                <strong>@character.Name</strong>
                                <p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p>
                            </div>
                            <div class="management-actions">
                                <button type="button"
                                        class="chip-button"
                                        title="Edit character"
                                        disabled="@(IsMutating || IsCreatingCampaign || !CanEditCharacter(character))"
                                        @onclick="() => EditCharacterRequested.InvokeAsync(character)">
                                    <span aria-hidden="true" class="emoji">✏️</span>
                                    <span class="sr-only">Edit @character.Name</span>
                                </button>
                                <button type="button"
                                        class="chip-button"
                                        title="Delete character"
                                        disabled="@(IsMutating || IsCreatingCampaign || !CanDeleteCharacter(character))"
                                        @onclick="() => DeleteCharacterRequested.InvokeAsync(character)">
                                    <span aria-hidden="true" class="emoji">🗑️</span>
                                    <span class="sr-only">Delete @character.Name</span>
                                </button>
                            </div>
                        </li>
                    }
                </ul>
            }

            <button type="button"
                    class="add-row-button"
                    disabled="@(IsMutating || IsCreatingCampaign)"
                    @onclick="CreateCharacterRequested">
                <span class="add-row-icon" aria-hidden="true">+</span>
                <span>Add character</span>
            </button>
        }
    </section>
</main>

@if (ShowCreateCampaignModal)
{
    <div class="modal-overlay" role="presentation">
        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Create Campaign">
            <h2>Create Campaign</h2>
            @if (!string.IsNullOrWhiteSpace(CampaignState.ErrorMessage))
            {
                <p class="form-error">@CampaignState.ErrorMessage</p>
            }
            <form class="form-grid" @onsubmit="SubmitCreateCampaignAsync" @onsubmit:preventDefault>
                <label for="campaign-name">Campaign name</label>
                <input id="campaign-name" @bind="CampaignState.Model.Name" @bind:event="oninput"/>
                @if (CampaignState.Errors.TryGetValue("name", out var campaignNameError))
                {
                    <p class="field-error">@campaignNameError</p>
                }

                <label for="campaign-ruleset">Ruleset</label>
                <select id="campaign-ruleset" @bind="CampaignState.Model.RulesetId">
                    <option value="">Select ruleset</option>
                    @foreach (var ruleset in Rulesets)
                    {
                        <option value="@ruleset.Id">@ruleset.Name</option>
                    }
                </select>
                @if (CampaignState.Errors.TryGetValue("rulesetId", out var campaignRulesetError))
                {
                    <p class="field-error">@campaignRulesetError</p>
                }

                <div class="inline-actions">
                    <button type="submit" disabled="@(IsMutating || IsCreatingCampaign)">@(IsCreatingCampaign ? "Creating..." : "Create Campaign")</button>
                    <button type="button" class="ghost" disabled="@(IsMutating || IsCreatingCampaign)" @onclick="CloseCreateCampaignModal">Cancel</button>
                </div>
            </form>
        </section>
    </div>
}