@model StoryAssetListViewModel
@{
    ViewData["Title"] = "Story Assets";
    ViewData["ProjectSection"] = "Assets";
}

<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>
    <span>Story assets</span>
</nav>

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

<div class="page-heading">
    <div>
        <p class="eyebrow">Story assets</p>
        <h1>@Model.Project.ProjectName <help-icon key="storyAssets.overview" /></h1>
    </div>
    <div class="button-row">
        <a class="btn btn-primary" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add asset</a>
    </div>
</div>

<section class="drag-drop-panel d-none" data-drag-drop-panel>
    <div class="drag-drop-panel-header">
        <div>
            <p class="eyebrow" data-drag-panel-kicker>Asset dependency</p>
            <h2 data-drag-panel-title>Create asset dependency</h2>
        </div>
        <button type="button" class="btn btn-outline-secondary btn-sm" data-drag-cancel>Cancel</button>
    </div>
    <p class="muted" data-drag-panel-summary></p>
    <form asp-controller="StoryAssets" asp-action="DropDependency" method="post" class="drag-drop-form" data-drag-form="asset-dependency">
        <input type="hidden" name="ProjectID" value="@Model.Project.ProjectID" />
        <input type="hidden" name="SourceAssetID" />
        <input type="hidden" name="TargetAssetID" />
        <div class="row g-2">
            <div class="col-12"><label class="form-label">Dependency type</label><select class="form-select form-select-sm" name="AssetDependencyTypeID" asp-items="Model.AssetDependencyTypeOptions"></select></div>
            <div class="col-6"><label class="form-label">Source required state</label><select class="form-select form-select-sm" name="SourceRequiredStateID" asp-items="Model.AssetStateOptions"><option value="">Optional</option></select></div>
            <div class="col-6"><label class="form-label">Target blocked state</label><select class="form-select form-select-sm" name="TargetBlockedStateID" asp-items="Model.AssetStateOptions"><option value="">Optional</option></select></div>
            <div class="col-12"><label class="form-label">Notes</label><textarea class="form-control form-control-sm" name="Description" rows="2"></textarea></div>
        </div>
        <p class="plain-preview" data-asset-dependency-preview></p>
        <div class="button-row mt-2">
            <button class="btn btn-primary btn-sm" type="submit">Save Dependency</button>
            <button class="btn btn-outline-secondary btn-sm" type="button" data-drag-cancel>Cancel</button>
        </div>
    </form>
</section>

<section class="list-section">
    @if (!Model.Assets.Any())
    {
        <p class="muted">No story assets yet. Add an object, clue, secret or other story item to track it across scenes.</p>
    }
    else
    {
        <div class="asset-card-grid">
            @foreach (var asset in Model.Assets)
            {
                <article class="asset-card" draggable="true" data-drag-type="asset" data-drag-id="@asset.StoryAssetID" data-drag-label="@asset.AssetName" data-asset-drop-target="true" data-asset-id="@asset.StoryAssetID" data-asset-label="@asset.AssetName">
                    <div class="visual-card-heading">
                        <partial name="_Avatar" model="@(new AvatarViewModel { DisplayName = asset.AssetName, ImagePath = asset.ImagePath, ThumbnailPath = asset.ThumbnailPath })" />
                        <div>
                            <p class="eyebrow">@asset.KindName</p>
                            <h2><a asp-action="Details" asp-route-id="@asset.StoryAssetID">@asset.AssetName</a></h2>
                            <p class="muted">@asset.Description</p>
                        </div>
                    </div>
                    <div class="asset-card-footer">
                        <span class="status-pill">Importance @asset.Importance</span>
                        <span class="purpose-chip">@(asset.CurrentStateName ?? "No state")</span>
                        @if (asset.IsResolved)
                        {
                            <span class="purpose-chip">Resolved</span>
                        }
                        <a class="btn btn-outline-secondary btn-sm ms-auto" asp-action="Edit" asp-route-id="@asset.StoryAssetID">Edit</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="@asset.StoryAssetID" />
                            <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                            <button class="btn btn-outline-danger btn-sm" type="submit">Archive</button>
                        </form>
                    </div>
                </article>
            }
        </div>
    }
</section>