@model Events.MVC.Models.People.PeoplePageViewModel

@{
    ViewData[Constants.ViewDataKeys.Title] = "People";
    ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New person";
    ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-person-panel";
}

<div class="d-flex flex-column gap-4">
    <section id="create-person-panel" class="collapse">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h2 class="h5 mb-3">Add a new person</h2>
                <div id="create-person-form">
                    <partial name="_CreatePersonForm" model='(Events.MVC.Models.People.PersonViewModel)ViewData[Constants.ViewDataKeys.CreatePersonModel]!' />
                </div>
            </div>
        </div>
    </section>

    <partial name="_PeopleList" model="Model" />
</div>

@section Scripts {
    <script>
        document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.PersonCreated)), function () {
            var form = document.querySelector("#create-person-form form");
            if (form) {
                form.reset();
            }

            var panel = document.getElementById("create-person-panel");
            if (panel && window.bootstrap) {
                bootstrap.Collapse.getOrCreateInstance(panel).hide();
            }
        });
    </script>
}