@model WritingContextDisplayViewModel
@{
    var scene = Model.Context?.Scene;
    var position = Model.Context?.Position;
}

<div class="writing-context-content"
     data-writing-context-fragment
     data-project-id="@position?.ProjectId"
     data-book-id="@position?.BookId"
     data-chapter-id="@position?.ChapterId"
     data-scene-id="@position?.SceneId"
     data-follow-status="@Model.FollowStatus">
    @if (scene is null)
    {
        <section class="writing-context-empty">
            <p class="eyebrow">Waiting</p>
            <h2>Waiting for Word...</h2>
            <p>Open a linked manuscript or choose a scene manually once context is available.</p>
        </section>
    }
    else
    {
        <header class="writing-context-scene-header">
            <div>
                <p class="eyebrow">@scene.Project?.ProjectName</p>
                <h2>@scene.SceneTitle</h2>
                <p>
                    @scene.Book?.BookDisplayTitle
                    <span aria-hidden="true">/</span>
                    Chapter @scene.Chapter?.ChapterNumber:g
                    <span aria-hidden="true">/</span>
                    Scene @scene.SceneNumber:g
                </p>
            </div>
            <div class="writing-context-scene-actions">
                <label for="writing-context-scene-select">Jump to scene</label>
                <select id="writing-context-scene-select" class="form-select form-select-sm" data-writing-context-scene-select>
                    @foreach (var option in Model.SceneOptions)
                    {
                        <option value="@option.Value" selected="@option.Selected">@option.Text</option>
                    }
                </select>
                <a class="btn btn-outline-secondary btn-sm" asp-controller="Scenes" asp-action="Edit" asp-route-id="@scene.SceneID">Open Scene</a>
            </div>
        </header>

        <nav class="writing-context-tabs" aria-label="Writing context tabs">
            <button type="button" class="active" data-writing-context-tab="overview">Overview</button>
            <button type="button" data-writing-context-tab="people">People</button>
            <button type="button" data-writing-context-tab="relationships">Relationships</button>
            <button type="button" data-writing-context-tab="place">Place</button>
            <button type="button" data-writing-context-tab="story">Story</button>
        </nav>

        <div class="writing-context-tab-panels">
            <section class="writing-context-tab-panel active" data-writing-context-panel="overview">
                <partial name="_WritingContextOverview" model="Model" />
            </section>
            <section class="writing-context-tab-panel" data-writing-context-panel="people" hidden>
                <partial name="_WritingContextPeople" model="Model" />
            </section>
            <section class="writing-context-tab-panel" data-writing-context-panel="relationships" hidden>
                <partial name="_WritingContextRelationships" model="Model" />
            </section>
            <section class="writing-context-tab-panel" data-writing-context-panel="place" hidden>
                <partial name="_WritingContextPlace" model="Model" />
            </section>
            <section class="writing-context-tab-panel" data-writing-context-panel="story" hidden>
                <partial name="_WritingContextStory" model="Model" />
            </section>
        </div>
    }
</div>