@model LocationListViewModel
@{
    ViewData["Title"] = "Locations";
    ViewData["ProjectSection"] = "Locations";
}

<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>Locations</span>
</nav>

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

<div class="location-page">
    <div class="page-heading compact">
        <div>
            <p class="eyebrow">Locations</p>
            <h1>@Model.Project.ProjectName <help-icon key="locations.overview" /></h1>
        </div>
        <a class="btn btn-primary" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">New location</a>
    </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>Location relationship</p>
            <h2 data-drag-panel-title>Create location relationship</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="Locations" asp-action="DropRelationship" method="post" class="drag-drop-form" data-drag-form="location-relationship">
        <input type="hidden" name="ProjectID" value="@Model.Project.ProjectID" />
        <input type="hidden" name="FromLocationID" />
        <input type="hidden" name="ToLocationID" />
        <div class="row g-2">
            <div class="col-12"><label class="form-label">Relationship type</label><select class="form-select form-select-sm" name="LocationRelationshipTypeID" asp-items="Model.RelationshipTypeOptions"></select></div>
            <div class="col-12 drag-check-grid">
                <label><input type="checkbox" name="IsBidirectional" value="true" /> Bidirectional</label>
                <label><input type="checkbox" name="CanHearNormalSpeech" value="true" /> Can hear speech</label>
                <label><input type="checkbox" name="CanHearLoudNoise" value="true" /> Can hear loud noise</label>
                <label><input type="checkbox" name="CanSeeMovement" value="true" /> Can see movement</label>
                <label><input type="checkbox" name="CanSeeClearly" value="true" /> Can see clearly</label>
                <label><input type="checkbox" name="CanTravelDirectly" value="true" /> Can travel directly</label>
            </div>
            <div class="col-12"><label class="form-label">Notes</label><textarea class="form-control form-control-sm" name="Notes" rows="2"></textarea></div>
        </div>
        <div class="button-row mt-2">
            <button class="btn btn-primary btn-sm" type="submit">Save</button>
            <button class="btn btn-outline-secondary btn-sm" type="button" data-drag-cancel>Cancel</button>
        </div>
    </form>
    </section>

    @if (!Model.Locations.Any())
    {
        <section class="empty-panel">
            <h2>No locations yet</h2>
            <p>Add buildings, floors, rooms, streets, and other places that matter to the story.</p>
        </section>
    }
    else
    {
        <section class="edit-panel location-tree">
            @foreach (var location in Model.Locations)
            {
                <div class="location-tree-row" draggable="true" data-drag-type="location" data-drag-id="@location.LocationID" data-drag-label="@location.LocationName" style="--location-depth:@location.Depth">
                    <div>
                        <a asp-action="Details" asp-route-id="@location.LocationID"><strong>@location.LocationName</strong></a>
                        @if (!string.IsNullOrWhiteSpace(location.LocationTypeName))
                        {
                            <span class="location-badge">@location.LocationTypeName</span>
                        }
                        <span class="muted">@location.LocationPath</span>
                    </div>
                    <div class="button-row compact-buttons">
                        <a class="btn btn-outline-secondary btn-sm" asp-action="Edit" asp-route-id="@location.LocationID">Edit</a>
                        <form asp-action="Archive" method="post" data-confirm-message="Archive this location?&#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="@location.LocationID" />
                            <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                            <button class="btn btn-outline-danger btn-sm" type="submit">Archive</button>
                        </form>
                    </div>
                </div>
            }
        </section>
    }
</div>