@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>

    @if (TempData["LocationMessage"] is string message)
    {
        <div class="alert alert-success" role="status">@message</div>
    }
    @if (TempData["LocationError"] is string error)
    {
        <div class="alert alert-danger" role="alert">@error</div>
    }
    <div class="edit-panel">
        <label for="locationDragAction" class="form-label">Drag a location onto another location to:</label>
        <select id="locationDragAction" class="form-select" data-location-drag-action>
            <option value="parent">Change its parent</option>
            <option value="relationship">Create a relationship</option>
        </select>
        <p class="muted mt-2 mb-0">Drop onto the new parent, then confirm the move. Child locations move with it. You can also change the parent using Edit.</p>
        <p class="text-danger mb-0" role="alert" data-location-move-error></p>
        <p class="mb-0" role="status" data-location-move-status></p>
    </div>
    <form asp-action="Reparent" method="post" data-location-reparent-form
          data-confirm-message="Change location parent?" data-confirm-button-text="Move location" data-confirm-button-class="btn-primary">
        <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
        <input type="hidden" name="locationId" />
        <input type="hidden" name="parentLocationId" />
        <input type="hidden" name="expectedParentLocationId" />
    </form>

    <div class="modal fade" tabindex="-1" aria-labelledby="locationRelationshipTitle" aria-hidden="true" data-location-relationship-modal>
    <div class="modal-dialog modal-dialog-centered modal-lg">
    <section class="modal-content p-3 d-none" data-drag-drop-panel>
    <div class="drag-drop-panel-header">
        <div>
            <p class="eyebrow" data-drag-panel-kicker>Location relationship</p>
            <h2 id="locationRelationshipTitle" 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>
    <p class="text-danger" role="alert" data-location-relationship-error></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>
    </div>
    </div>

    @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
    {
        <partial name="_LocationTree" model="Model" />
    }
</div>