@model Events.MVC.Models.People.PeoplePageViewModel

<section class="card border-0 shadow-sm" id="people-list">
    <div class="card-body">
        <div id="people-state" class="d-none">
            <input type="hidden" name="page" value="@Model.People.PagingInfo.CurrentPage" />
            <input type="hidden" name="pageSize" value="@Model.People.PagingInfo.ItemsPerPage" />
            <input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
            <input type="hidden" name="filters" value="@Model.People.PagingInfo.Filters" />
            <input type="hidden" name="countryFilter" value="@Model.CountryFilter" />
        </div>

        <form
            asp-action="Index"
            method="get"
            class="d-flex justify-content-between align-items-start gap-3 flex-wrap flex-lg-nowrap mb-4"
            hx-get="@Url.Action("Index", "People")"
            hx-target="#people-list"
            hx-swap="outerHTML"
            hx-push-url="true"
            onsubmit="var input=this.querySelector('[data-name-filter-input]'); var country=this.querySelector('[name=countryFilter]'); var filters=this.querySelector('[name=filters]'); var values=[]; if (input && input.value.trim()) { values.push('FullNameTranscription' + String.fromCharCode(64) + '=*' + input.value.trim()); } if (country && country.value) { values.push('CountryCode==' + country.value); } filters.value=values.join(','); this.querySelector('[name=page]').value='1';">
            <input type="hidden" name="page" value="1" />
            <input type="hidden" name="pageSize" value="@Model.People.PagingInfo.ItemsPerPage" />
            <input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
            <input type="hidden" name="filters" value="@Model.People.PagingInfo.Filters" />

            <div class="d-flex align-items-center gap-3 pt-2">
                <h2 class="h5 mb-0">People list</h2>
                <span class="badge text-bg-light">@(Model.People.PagingInfo.IsFiltered ? $"{Model.People.PagingInfo.FilteredItemsCount} / {Model.People.PagingInfo.TotalItemsCount}" : Model.People.PagingInfo.TotalItemsCount.ToString())</span>
            </div>

            <div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
                <input
                    id="personNameFilter"
                    value="@Model.People.PagingInfo.NameFilter"
                    data-name-filter-input
                    class="form-control"
                    style="max-width: 18rem;"
                    placeholder="Search by transcribed full name"
                    aria-label="Filter by transcribed full name" />

                <select name="countryFilter" asp-items="Model.CountryOptions" class="form-select" style="max-width: 14rem;" aria-label="Filter by country">
                    <option value="">All countries</option>
                </select>

                <button type="submit" class="btn btn-outline-primary">Filter</button>
                @if (Model.People.PagingInfo.IsFiltered)
                {
                    <a
                        asp-action="Index"
                        asp-route-page="1"
                        asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage"
                        asp-route-sorts="@Model.People.PagingInfo.Sorts"
                        asp-route-filters=""
                        class="btn btn-outline-secondary"
                        hx-get="@Url.Action("Index", "People", new { page = 1, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.Sorts, filters = string.Empty })"
                        hx-target="#people-list"
                        hx-swap="outerHTML"
                        hx-push-url="true">
                        Clear
                    </a>
                }
            </div>
        </form>

        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead>
                    <tr>
                        <th>
                            <a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("Id")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("Id"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
                                ID@(Model.People.PagingInfo.IsSortedBy("Id") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th>
                            <a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("FirstNameTranscription")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("FirstNameTranscription"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
                                First name@(Model.People.PagingInfo.IsSortedBy("FirstNameTranscription") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th>
                            <a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("LastNameTranscription")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("LastNameTranscription"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
                                 Last name@(Model.People.PagingInfo.IsSortedBy("LastNameTranscription") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th></th>
                        <th>
                            <a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("BirthDate")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("BirthDate"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
                                Birth date@(Model.People.PagingInfo.IsSortedBy("BirthDate") ? (Model.People.PagingInfo.IsDescending() ? " v" : " ^") : "")
                            </a>
                        </th>
                        <th>
                            <a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("CountryName")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("CountryName"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
                                Country@(Model.People.PagingInfo.IsSortedBy("CountryName") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th>
                            <a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("RegistrationsCount")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("RegistrationsCount"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
                                Registrations@(Model.People.PagingInfo.IsSortedBy("RegistrationsCount") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th class="text-end"></th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.People.Data.Count == 0)
                    {
                        <tr>
                            <td colspan="8" class="text-body-secondary">No people to display.</td>
                        </tr>
                    }
                    else
                    {
                        @foreach (var person in Model.People.Data)
                        {
                            <partial name="_PersonRow" model="person" />
                        }
                    }
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-4 gap-3 flex-wrap">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <small class="text-body-secondary">Page @Model.People.PagingInfo.CurrentPage of @Model.People.PagingInfo.TotalPages</small>
                <form asp-action="Index" method="get" class="d-inline-flex align-items-center gap-2" hx-get="@Url.Action("Index", "People")" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
                    <input type="hidden" name="page" value="1" />
                    <input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
                    <input type="hidden" name="filters" value="@Model.People.PagingInfo.Filters" />
                    <select name="pageSize" class="form-select form-select-sm" style="width: auto;" aria-label="Items per page" onchange="this.form.requestSubmit()">
                        @{
                            int[] pageSizeOptions = [10, 20, 50, 100];
                        }
                        @foreach (var option in pageSizeOptions)
                        {
                            <option value="@option" selected="@(Model.People.PagingInfo.ItemsPerPage == option)">@option</option>
                        }
                    </select>
                </form>
            </div>
            <pager
                page-info="@Model.People.PagingInfo"
                page-action="Index"
                page-title="Enter a page number and press Enter"
                page-target="#people-list"
                page-swap="outerHTML"
                page-push-url="true">
            </pager>
        </div>
    </div>
</section>