@model Events.MVC.Models.Registrations.RegistrationsPageViewModel

<section class="card border-0 shadow-sm" id="registrations-list">
    <div class="card-body">
        <div id="registrations-state" class="d-none">
            <input type="hidden" name="eventId" value="@Model.SelectedEventId" />
            <input type="hidden" name="page" value="@Model.Registrations.PagingInfo.CurrentPage" />
            <input type="hidden" name="pageSize" value="@Model.Registrations.PagingInfo.ItemsPerPage" />
            <input type="hidden" name="sorts" value="@Model.Registrations.PagingInfo.Sorts" />
            <input type="hidden" name="filters" value="@Model.Registrations.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", "Registrations")"
            hx-target="#registrations-panel"
            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('PersonTranscription' + 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="eventId" value="@Model.SelectedEventId" />
            <input type="hidden" name="page" value="1" />
            <input type="hidden" name="pageSize" value="@Model.Registrations.PagingInfo.ItemsPerPage" />
            <input type="hidden" name="sorts" value="@Model.Registrations.PagingInfo.Sorts" />
            <input type="hidden" name="filters" value="@Model.Registrations.PagingInfo.Filters" />

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

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

                <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.Registrations.PagingInfo.IsFiltered)
                {
                    <a
                        asp-action="Index"
                        asp-route-eventId="@Model.SelectedEventId"
                        asp-route-page="1"
                        asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage"
                        asp-route-sorts="@Model.Registrations.PagingInfo.Sorts"
                        asp-route-filters=""
                        class="btn btn-outline-secondary"
                        hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = 1, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.Sorts, filters = string.Empty })"
                        hx-target="#registrations-panel"
                        hx-swap="outerHTML"
                        hx-push-url="true">
                        Clear
                    </a>
                }
            </div>
        </form>

        @if (!Model.CanCreate && !string.IsNullOrWhiteSpace(Model.CreateDisabledMessage))
        {
            <div class="alert alert-warning mb-4">@Model.CreateDisabledMessage</div>
        }

        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead>
                    <tr>
                        <th>
                            <a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("Id")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("Id"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
                                ID@(Model.Registrations.PagingInfo.IsSortedBy("Id") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th>
                            <a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("PersonName")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("PersonName"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
                                Person@(Model.Registrations.PagingInfo.IsSortedBy("PersonName") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th>Country</th>
                        <th>
                            <a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("SportName")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("SportName"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
                                Sport@(Model.Registrations.PagingInfo.IsSortedBy("SportName") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th>
                            <a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("RegisteredAt")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("RegisteredAt"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
                                Registered at@(Model.Registrations.PagingInfo.IsSortedBy("RegisteredAt") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
                            </a>
                        </th>
                        <th class="text-end"></th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.Registrations.Data.Count == 0)
                    {
                        <tr>
                            <td colspan="6" class="text-body-secondary">No registrations to display.</td>
                        </tr>
                    }
                    else
                    {
                        @foreach (var registration in Model.Registrations.Data)
                        {
                            <partial name="_RegistrationRow" model="registration" />
                        }
                    }
                </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.Registrations.PagingInfo.CurrentPage of @Model.Registrations.PagingInfo.TotalPages</small>
                <form asp-action="Index" method="get" class="d-inline-flex align-items-center gap-2" hx-get="@Url.Action("Index", "Registrations")" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
                    <input type="hidden" name="eventId" value="@Model.SelectedEventId" />
                    <input type="hidden" name="page" value="1" />
                    <input type="hidden" name="sorts" value="@Model.Registrations.PagingInfo.Sorts" />
                    <input type="hidden" name="filters" value="@Model.Registrations.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.Registrations.PagingInfo.ItemsPerPage == option)">@option</option>
                        }
                    </select>
                </form>
            </div>
            <pager
                page-info="@Model.Registrations.PagingInfo"
                page-action="Index"
                page-title="Enter a page number and press Enter"
                page-target="#registrations-panel"
                page-swap="outerHTML"
                page-push-url="true"
                page-route-event-id="@Model.SelectedEventId.ToString()">
            </pager>
        </div>
    </div>
</section>