@model StoryDynamicsViewModel
@{
    ViewData["Title"] = "Story Dynamics";
    ViewData["ProjectSection"] = "Health";
}

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <a asp-controller="Projects" asp-action="Index">Projects</a>
    <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">@Model.Project.ProjectName</a>
    <a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story Health</a>
    <span>Story Dynamics</span>
</nav>

<partial name="_ProjectSectionNav" model="Model.Project" />

<div class="page-heading">
    <div>
        <p class="eyebrow">Story Dynamics</p>
        <h1>@Model.Project.ProjectName <help-icon key="storyDynamics.overview" /></h1>
        <p class="lead-text">Character pairings, neglected arcs, abrupt transitions, knowledge jumps, and advisory continuity signals.</p>
    </div>
    <form asp-action="RunChecks" method="post">
        <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
        <button class="btn btn-primary" type="submit">Run dynamics checks</button>
    </form>
</div>

<partial name="_DynamicsIssues" model="Model.Issues" />

<section class="story-bible-section">
    <div class="story-bible-section-heading">
        <div>
            <p class="eyebrow">Pairing Heatmap</p>
            <h2>Character Pairings</h2>
        </div>
        <span class="soft-count">@Model.Pairings.Count pairings</span>
    </div>
    <div class="story-bible-grid story-bible-grid-compact">
        @foreach (var pairing in Model.Pairings)
        {
            <article class="story-bible-card">
                <div class="story-bible-card-title">
                    <h3>@pairing.CharacterAName + @pairing.CharacterBName</h3>
                    <span>@pairing.SharedSceneCount scenes</span>
                </div>
                <p class="muted">First: @(pairing.FirstSceneLabel ?? "Not placed")</p>
                <p class="muted">Last: @(pairing.LastSceneLabel ?? "Not placed")</p>
            </article>
        }
    </div>
</section>