@model CharacterListViewModel
@{
    ViewData["Title"] = "Characters";
}

<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="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Project</a>
        <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">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-controller="StoryAssets" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Assets</a>
        <a asp-controller="Locations" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
        <a asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Threads</a>
    </nav>
</section>

<div class="page-heading">
    <div>
        <p class="eyebrow">Characters</p>
        <h1>@Model.Project.ProjectName</h1>
    </div>
    <div class="button-row">
        <a class="btn btn-outline-secondary" asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Project</a>
        <a class="btn btn-primary" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add character</a>
    </div>
</div>

<section class="list-section">
    @if (!Model.Characters.Any())
    {
        <p class="muted">No characters yet.</p>
    }
    else
    {
        <div class="asset-card-grid">
            @foreach (var character in Model.Characters)
            {
                <article class="asset-card character-card">
                    <div>
                        <p class="eyebrow">Character</p>
                        <h2><a asp-action="Details" asp-route-id="@character.CharacterID">@character.CharacterName</a></h2>
                        <p class="muted">@character.DefaultDescription</p>
                    </div>
                    <div class="asset-card-footer">
                        @if (!string.IsNullOrWhiteSpace(character.ShortName))
                        {
                            <span class="purpose-chip">@character.ShortName</span>
                        }
                        @if (character.AgeAtSeriesStart.HasValue)
                        {
                            <span class="status-pill">Age @character.AgeAtSeriesStart</span>
                        }
                        <a class="btn btn-outline-secondary btn-sm ms-auto" asp-action="Edit" asp-route-id="@character.CharacterID">Edit</a>
                    </div>
                </article>
            }
        </div>
    }
</section>