@model StoryAssetDetailViewModel
@{
    ViewData["Title"] = Model.Asset.AssetName;
    var firstAssetEvent = Model.Events.FirstOrDefault();
    var firstCustodyEvent = Model.CustodyEvents.FirstOrDefault();
    var firstSceneId = firstAssetEvent?.SceneID ?? firstCustodyEvent?.SceneID;
}

<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">Story assets</a>
    <span>@Model.Asset.AssetName</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="@firstSceneId" asp-route-FocusType="asset" asp-route-FocusID="@Model.Asset.StoryAssetID">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">Assets</a>
    </nav>
</section>

<div class="page-heading">
    <div>
        <p class="eyebrow">@Model.Asset.KindName</p>
        <h1>@Model.Asset.AssetName</h1>
        <p class="lead-text">@Model.Asset.Description</p>
    </div>
    <div class="button-row">
        <a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story assets</a>
        <a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@firstSceneId" asp-route-FocusType="asset" asp-route-FocusID="@Model.Asset.StoryAssetID">Back to timeline</a>
        <a class="btn btn-outline-primary" asp-action="Edit" asp-route-id="@Model.Asset.StoryAssetID">Edit asset</a>
        <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this asset?&#10;&#10;This will hide it from active lists and timelines, but the data will be kept and can be restored later.">
            <input type="hidden" name="id" value="@Model.Asset.StoryAssetID" />
            <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
            <button class="btn btn-outline-danger" type="submit">Archive Asset</button>
        </form>
    </div>
</div>

<section class="asset-detail-grid">
    <article class="plain-card">
        <h2>Current state</h2>
        <p><strong>Importance:</strong> @Model.Asset.Importance / 10</p>
        <p><strong>State:</strong> @(Model.Asset.CurrentStateName ?? "No state")</p>
        <p><strong>Location:</strong> @(Model.Asset.CurrentLocationPath ?? "No location")</p>
        <p><strong>Resolved:</strong> @(Model.Asset.IsResolved ? "Yes" : "No")</p>
    </article>

    <article class="plain-card">
        <h2>Dependencies</h2>
        @if (!Model.Dependencies.Any())
        {
            <p class="muted">No dependencies yet.</p>
        }
        else
        {
            <div class="asset-mini-list">
                @foreach (var dependency in Model.Dependencies)
                {
                    <div class="asset-mini-item">
                        <strong>@dependency.SourceAssetName @dependency.DependencyTypeName.ToLowerInvariant() @dependency.TargetAssetName</strong>
                        <span>@dependency.SourceRequiredStateName before @dependency.TargetBlockedStateName</span>
                        <form asp-action="DeleteDependency" method="post">
                            <input type="hidden" name="id" value="@dependency.AssetDependencyID" />
                            <input type="hidden" name="returnAssetId" value="@Model.Asset.StoryAssetID" />
                            <button class="btn btn-outline-secondary btn-sm" type="submit">Remove</button>
                        </form>
                    </div>
                }
            </div>
        }

        <form asp-action="AddDependency" method="post" class="asset-create-form">
            <input type="hidden" name="ProjectID" value="@Model.Project.ProjectID" />
            <input type="hidden" name="returnAssetId" value="@Model.Asset.StoryAssetID" />
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="form-label">Source asset</label>
                    <select class="form-select form-select-sm" name="SourceAssetID" asp-items="Model.AssetOptions"></select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Target asset</label>
                    <select class="form-select form-select-sm" name="TargetAssetID" asp-items="Model.AssetOptions"></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Dependency</label>
                    <select class="form-select form-select-sm" name="AssetDependencyTypeID" asp-items="Model.AssetDependencyTypeOptions"></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Source required state</label>
                    <select class="form-select form-select-sm" name="SourceRequiredStateID" asp-items="Model.AssetStateOptions">
                        <option value="">Any</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Target blocked state</label>
                    <select class="form-select form-select-sm" name="TargetBlockedStateID" asp-items="Model.AssetStateOptions">
                        <option value="">Any</option>
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label">Description</label>
                    <textarea class="form-control form-control-sm" name="Description" rows="2"></textarea>
                </div>
            </div>
            <button class="btn btn-outline-primary btn-sm mt-2" type="submit">Add dependency</button>
        </form>
    </article>
</section>

<section class="list-section mt-3">
    <h2>Events across scenes</h2>
    @if (!Model.Events.Any())
    {
        <p class="muted">No scene events yet.</p>
    }
    else
    {
        <div class="asset-mini-list">
            @foreach (var assetEvent in Model.Events)
            {
                <div class="asset-mini-item">
                    <span class="asset-event-marker">@assetEvent.MarkerText</span>
                    <div>
                        <strong>@assetEvent.EventTitle</strong>
                        <span>@assetEvent.BookTitle / Ch @assetEvent.ChapterNumber / Scene @assetEvent.SceneNumber: @assetEvent.SceneTitle</span>
                        <span>@assetEvent.FromStateName -> @assetEvent.ToStateName</span>
                        <a asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@assetEvent.SceneID" asp-route-FocusType="asset" asp-route-FocusID="@Model.Asset.StoryAssetID">Open in timeline</a>
                    </div>
                </div>
            }
        </div>
    }
</section>

<section class="list-section mt-3">
    <h2>Custody</h2>
    @if (!Model.CustodyEvents.Any())
    {
        <p class="muted">No custody events yet.</p>
    }
    else
    {
        <div class="asset-mini-list">
            @foreach (var custody in Model.CustodyEvents)
            {
                <div class="asset-mini-item">
                    <strong>@custody.CustodyEventTypeName</strong>
                    <span>@custody.CustodianSummary</span>
                    <span>@custody.BookTitle / Ch @custody.ChapterNumber / Scene @custody.SceneNumber: @custody.SceneTitle</span>
                    <a asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@custody.SceneID" asp-route-FocusType="asset" asp-route-FocusID="@Model.Asset.StoryAssetID">Open in timeline</a>
                </div>
            }
        </div>
    }
</section>