PlotDirector/PlotLine/Views/Characters/Details.cshtml

@model CharacterDetailViewModel
@{
    ViewData["Title"] = Model.Character.CharacterName;
    var firstAppearance = Model.Appearances.FirstOrDefault();
}

<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-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
    <span>@Model.Character.CharacterName</span>
</nav>

<section class="context-header">
    <div class="context-title">
        <span class="eyebrow">Project context</span>
        <strong>@Model.Project.ProjectName</strong>
    </div>
    <nav class="context-nav" aria-label="Project navigation">
        <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@firstAppearance?.SceneID">Show on timeline</a>
        <a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
        <a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
        <a asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
    </nav>
</section>

<div class="page-heading">
    <div>
        <p class="eyebrow">Character</p>
        <h1>@Model.Character.CharacterName</h1>
        <p class="lead-text">@Model.Character.DefaultDescription</p>
    </div>
    <div class="button-row">
        <a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
        <a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@firstAppearance?.SceneID">Back to timeline</a>
        <a class="btn btn-outline-primary" asp-action="Edit" asp-route-id="@Model.Character.CharacterID">Edit character</a>
    </div>
</div>

<section class="asset-detail-grid">
    <article class="plain-card">
        <h2>Profile</h2>
        <p><strong>Short name:</strong> @Model.Character.ShortName</p>
        <p><strong>Sex:</strong> @Model.Character.Sex</p>
        <p><strong>Age:</strong> @Model.DisplayAge</p>
        <p><strong>Height:</strong> @Model.Character.Height</p>
        <p><strong>Eye colour:</strong> @Model.Character.EyeColour</p>
    </article>
    <article class="plain-card">
        <h2>Relationships</h2>
        @if (!Model.Relationships.Any())
        {
            <p class="muted">No relationships yet.</p>
        }
        else
        {
            <div class="asset-mini-list">
                @foreach (var relationship in Model.Relationships)
                {
                    <div class="asset-mini-item">
                        <strong>@relationship.CharacterAName -> @relationship.CharacterBName</strong>
                        <span>@relationship.RelationshipTypeName</span>
                    </div>
                }
            </div>
        }
    </article>
</section>

<section class="list-section mt-3">
    <h2>Scene appearances</h2>
    @if (!Model.Appearances.Any())
    {
        <p class="muted">No scene appearances yet.</p>
    }
    else
    {
        <div class="asset-mini-list">
            @foreach (var appearance in Model.Appearances)
            {
                <div class="asset-mini-item">
                    <strong>@appearance.BookTitle / Ch @appearance.ChapterNumber / Scene @appearance.SceneNumber: @appearance.SceneTitle</strong>
                    <span>@appearance.RoleInSceneTypeName / @appearance.PresenceTypeName</span>
                    <span>@appearance.OutfitDescription @appearance.PhysicalCondition @appearance.EmotionalState</span>
                    <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@appearance.SceneID">Open in timeline</a>
                </div>
            }
        </div>
    }
</section>

<section class="list-section mt-3">
    <h2>Attribute history</h2>
    @if (!Model.AttributeEvents.Any())
    {
        <p class="muted">No attribute events yet.</p>
    }
    else
    {
        <div class="asset-mini-list">
            @foreach (var item in Model.AttributeEvents)
            {
                <div class="asset-mini-item">
                    <strong>@item.AttributeName: @item.AttributeValue</strong>
                    <span>@item.BookTitle / Ch @item.ChapterNumber / Scene @item.SceneNumber: @item.SceneTitle</span>
                    <span>@item.Description</span>
                    <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@item.SceneID">Open in timeline</a>
                </div>
            }
        </div>
    }
</section>

<section class="list-section mt-3">
    <h2>Knowledge</h2>
    @if (!Model.KnowledgeItems.Any())
    {
        <p class="muted">No knowledge entries yet.</p>
    }
    else
    {
        <div class="asset-mini-list">
            @foreach (var item in Model.KnowledgeItems)
            {
                <div class="asset-mini-item">
                    <strong>@item.KnowledgeStateName: @(item.AssetName ?? item.ThreadTitle)</strong>
                    <span>@item.BookTitle / Ch @item.ChapterNumber / Scene @item.SceneNumber: @item.SceneTitle</span>
                    <span>@item.Description</span>
                    <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@item.SceneID">Open in timeline</a>
                </div>
            }
        </div>
    }
</section>

<section class="list-section mt-3">
    <h2>Relationship events</h2>
    @if (!Model.RelationshipEvents.Any())
    {
        <p class="muted">No relationship events yet.</p>
    }
    else
    {
        <div class="asset-mini-list">
            @foreach (var item in Model.RelationshipEvents)
            {
                <div class="asset-mini-item">
                    <strong>@item.CharacterAName -> @item.CharacterBName: @item.RelationshipStateName</strong>
                    <span>@item.BookTitle / Ch @item.ChapterNumber / Scene @item.SceneNumber: @item.SceneTitle</span>
                    <span>Intensity @item.Intensity. @item.Description</span>
                    <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-selectedSceneId="@item.SceneID">Open in timeline</a>
                </div>
            }
        </div>
    }
</section>