@model CharacterMergeViewModel
@{
    ViewData["Title"] = $"Merge {Model.SourceCharacter.CharacterName}";
    ViewData["ProjectSection"] = "Characters";
}

<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>
    <a asp-action="Details" asp-route-id="@Model.SourceCharacter.CharacterID">@Model.SourceCharacter.CharacterName</a>
    <span>Merge</span>
</nav>

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

<div class="page-heading compact">
    <div>
        <p class="eyebrow">Character identity</p>
        <h1>Merge @Model.SourceCharacter.CharacterName</h1>
        <p class="lead-text">References, aliases, scene appearances, POV links, relationship events and knowledge are moved to the canonical character. The source character is archived.</p>
    </div>
    <a class="btn btn-outline-secondary" asp-action="Details" asp-route-id="@Model.SourceCharacter.CharacterID">Cancel</a>
</div>

<form asp-action="Merge" method="post" class="edit-panel">
    <input asp-for="Form.SourceCharacterID" type="hidden" />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="row g-3">
        <div class="col-md-8">
            <label asp-for="Form.TargetCharacterID" class="form-label">Canonical character</label>
            <select asp-for="Form.TargetCharacterID" asp-items="Model.TargetOptions" class="form-select">
                <option value="">Choose character</option>
            </select>
        </div>
        <div class="col-12">
            <label class="form-check">
                <input asp-for="Form.Confirm" class="form-check-input" />
                <span class="form-check-label">I understand this will archive @Model.SourceCharacter.CharacterName and move references to the selected character.</span>
            </label>
        </div>
    </div>
    <button class="btn btn-danger mt-3" type="submit">Merge character</button>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}