{% extends base_template_path %}
{% load powercrud_partials %}
{% load powercrud %}

{% block content %}
    {% partial pcrud_content %}
{% endblock %}

{% partialdef pcrud_content %}
    <style>
        :root {
            --pc-inline-icon-buffer: 2.25ch;
            --pc-filter-control-height: 2rem;
            --pc-filter-font-size: 0.8125rem;
        }

        .inline-field-widget[data-inline-refreshing="true"] {
            opacity: 0.7;
            cursor: wait;
        }

        .inline-field-widget[data-inline-refreshing="true"] * {
            pointer-events: none;
        }

        .table-column-width {
            width: fit-content;
            max-width: {{ table_max_col_width }};
        }
        th.table-column-width {
            white-space: normal;
            max-width: {{ table_max_col_width }};
        }

        #filterCollapse .filter-panel-shell {
            width: 100%;
            padding: 0;
        }

        [data-powercrud-list-toolbar][data-powercrud-toolbar-wrapped="true"] [data-powercrud-view-controls] {
            justify-content: flex-start;
            margin-left: 0 !important;
            width: 100%;
        }

        [data-powercrud-view-help="true"] {
            border-color: var(--pc-view-help-border);
            max-width: 100%;
        }

        [data-powercrud-view-help="true"] > summary {
            background-color: var(--pc-view-help-summary-bg);
            color: var(--pc-view-help-summary-fg);
            min-height: 0;
            padding-block: 0.75rem;
        }

        [data-powercrud-view-help-content="true"] {
            background-color: var(--pc-view-help-content-bg);
            color: var(--pc-view-help-content-fg);
        }

        [data-powercrud-view-help="true"][open] > [data-powercrud-view-help-content="true"] {
            padding-top: 0.75rem;
        }

        @media (max-width: 767px) {
            [data-powercrud-list-columns="true"] .dropdown-content {
                inset-inline-end: auto;
                inset-inline-start: 0;
            }
        }

        [data-powercrud-list-columns-placement="start"] .dropdown-content {
            inset-inline-end: auto;
            inset-inline-start: 0;
        }

        #filter-form {
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
            width: 100%;
            max-width: calc((20rem * 4) + (0.5rem * 3));
            padding: 0.25rem 0.5rem;
        }

        #filter-form .filter-field {
            min-width: 0;
        }

        #filter-form .filter-field-shell {
            display: grid;
            grid-template-columns: minmax(5.25rem, 6.75rem) minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 0.375rem;
            row-gap: 0;
            min-height: 100%;
            padding: 0 0.25rem;
        }

        #filter-form .filter-field-label .label-text {
            text-align: right;
            white-space: normal;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }

        #filter-form .filter-field-label {
            padding: 0;
            min-height: 0;
            align-self: center;
            justify-self: end;
        }

        #filter-form .filter-field-action {
            min-width: 1.125rem;
            min-height: 1.125rem;
            padding: 0;
        }

        #filter-form .filter-field-action svg {
            width: 0.875rem;
            height: 0.875rem;
        }

        #filter-form input:not([type="checkbox"]),
        #filter-form select:not([multiple]) {
            height: var(--pc-filter-control-height) !important;
            min-height: var(--pc-filter-control-height) !important;
            max-height: var(--pc-filter-control-height) !important;
            padding-top: 0.1875rem !important;
            padding-bottom: 0.1875rem !important;
            font-size: var(--pc-filter-font-size) !important;
            line-height: 1.2 !important;
        }

        #filter-form select:not([multiple]):not(.ts-hidden-accessible) {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            line-height: calc(var(--pc-filter-control-height) - 2px) !important;
        }

        #filter-form .filter-field-input {
            width: 100%;
        }

        #filter-form .filter-field-input > * {
            width: 100%;
        }

        #filter-form .ts-wrapper {
            width: 100%;
        }

        #filter-form .ts-wrapper .ts-control {
            min-height: var(--pc-filter-control-height);
            font-size: var(--pc-filter-font-size);
            line-height: 1.2;
        }

        #filter-form .ts-wrapper.multi .ts-control {
            align-items: center;
            padding-top: 0.125rem;
            padding-bottom: 0.125rem;
            min-height: var(--pc-filter-control-height);
        }

        #filter-form .ts-wrapper.multi .ts-control > .item {
            margin: 0.125rem;
        }

        #filter-form select[multiple] {
            min-height: var(--pc-filter-control-height) !important;
            max-height: var(--pc-filter-control-height) !important;
            font-size: var(--pc-filter-font-size) !important;
        }

        #filter-form .ts-dropdown {
            font-size: var(--pc-filter-font-size);
        }

        [data-powercrud-add-filter-container]:not(.hidden) {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        [data-powercrud-add-filter-container] .ts-wrapper {
            width: 100%;
        }

        [data-powercrud-add-filter-container] .ts-wrapper .ts-control {
            background-color: var(--color-base-200);
            border-color: color-mix(in oklab, var(--color-base-content) 18%, transparent);
            min-height: 2.5rem;
            font-size: 0.875rem;
            line-height: 1.25;
        }

        @media (max-width: 639px) {
            #filterCollapse .filter-panel-shell {
                padding: 0;
            }

            #filter-form {
                padding: 0.25rem 0.375rem;
            }

            [data-powercrud-add-filter-container] {
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
            }

            [data-powercrud-add-filter-container] label {
                max-width: none;
            }

            [data-powercrud-filter-panel-action] {
                width: 100%;
            }

            #filter-form .filter-field-shell {
                grid-template-columns: 1fr auto;
                row-gap: 0.375rem;
                padding: 0;
            }

            #filter-form .filter-field-label {
                grid-column: 1;
                grid-row: 1;
                justify-self: start;
            }

            #filter-form .filter-field-label .label-text {
                text-align: left;
            }

            #filter-form .filter-field-input {
                grid-column: 1 / -1;
                grid-row: 2;
            }

            #filter-form .filter-field-action {
                grid-column: 2;
                grid-row: 1;
                justify-self: end;
            }
        }
    </style>

    <title id="header_title">{{header_title}}</title>
    <div class="flex flex-col"
         data-powercrud-object-list="true"
         data-powercrud-list-url="{{ list_view_url }}"
         data-powercrud-original-target="{{ original_target }}">
        <h1 class="flex-1 font-bold text-xl text-primary">{{ view.get_view_title }}</h1>
        {% if view.get_view_instructions %}
            <p class="mt-1 text-sm text-base-content/80">{{ view.get_view_instructions }}</p>
        {% endif %}
        {% with view_help=view.get_view_help view_help_paragraphs=view.get_view_help_detail_paragraphs %}
            {% if view_help %}
                <details class="collapse collapse-arrow mt-3 border"
                         data-powercrud-view-help="true"
                         data-powercrud-view-help-min-width="{{ view_help.min_width }}"
                         style="{{ view_help.style }}"
                         {% if view_help.default_open %}open{% endif %}>
                    <summary class="collapse-title cursor-pointer text-sm font-semibold">
                        {{ view_help.summary }}
                    </summary>
                    <div class="collapse-content space-y-2 text-sm"
                         data-powercrud-view-help-content="true">
                        {% for paragraph in view_help_paragraphs %}
                            <p>{{ paragraph }}</p>
                        {% endfor %}
                    </div>
                </details>
            {% endif %}
        {% endwith %}

        <div class="my-3 flex flex-wrap items-center gap-3"
             data-powercrud-list-toolbar="true">
            <div class="flex flex-wrap items-center gap-3"
                 data-powercrud-action-controls>
            {% if enable_bulk_edit %}
            {% partial bulk_selection_status %}
            {% endif %}

            {% if create_view_url %}
                {% if use_htmx and htmx_target %}
                    <a class="btn btn-primary {{ view.get_extra_button_classes }}" href="{{ create_view_url }}"
                        hx-get="{{ create_view_url }}"
                        hx-target="{{htmx_target}}"
                        data-powercrud-modal-trigger="true"
                        onclick="document.getElementById('{{ modal_id }}').showModal()">
                        Create {{ object_verbose_name }}
                    </a>
                {% else %}
                    <a class="btn btn-primary {{ view.get_extra_button_classes }}" href="{{ create_view_url }}">
                        Create {{ object_verbose_name }}
                    </a>
                {% endif %}
            {% endif %}

            {% extra_buttons view %}
            </div>

            <div class="flex flex-wrap items-center gap-2 sm:ml-auto"
                 data-powercrud-view-controls>
            {% if filter_favourites_enabled %}
                {% include "powercrud/contrib/favourites/toolbar.html" %}
            {% endif %}

            {% if filterset %}
                <div class="flex flex-wrap items-center gap-2"
                     data-powercrud-filter-toolbar>
                    <button class="btn btn-outline btn-secondary {{ view.get_extra_button_classes }}" type="button"
                            data-powercrud-filter-toggle
                            id="filterToggleBtn"
                            aria-controls="filterCollapse"
                            aria-expanded="false"
                            aria-label="Show filters"
                            data-powercrud-tooltip="semantic"
                            data-tippy-content="Show filters">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             width="16"
                             height="16"
                             fill="currentColor"
                             class="bi bi-funnel"
                             viewBox="0 0 16 16"
                             aria-hidden="true">
                            <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 20 20"
                             fill="currentColor"
                             class="h-4 w-4"
                             aria-hidden="true">
                            <path fill-rule="evenodd"
                                  d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z"
                                  clip-rule="evenodd" />
                        </svg>
                    </button>
                </div>
            {% endif %}

            {% if list_options_url and list_column_state.enabled %}
                <details class="dropdown dropdown-end" data-powercrud-list-columns="true">
                    <summary class="btn btn-outline btn-secondary {{ view.get_extra_button_classes }}"
                             data-powercrud-list-columns-trigger="true"
                             data-powercrud-tooltip="semantic"
                             data-tippy-content="Choose visible columns">
                        <span>Cols {{ list_column_state.active_columns|length }}/{{ list_column_state.allowed_columns|length }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 20 20"
                             fill="currentColor"
                             class="h-4 w-4"
                             aria-hidden="true">
                            <path fill-rule="evenodd"
                                  d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z"
                                  clip-rule="evenodd" />
                        </svg>
                    </summary>
                    <div class="dropdown-content z-20 mt-2 w-72 max-w-[calc(100vw-2rem)] rounded-box border border-base-300 bg-base-100 p-3 shadow"
                         data-powercrud-list-columns-panel="true">
                        <form method="post"
                              action="{{ list_options_url }}"
                              {% if use_htmx %}
                                  hx-post="{{ list_options_url }}"
                                  hx-target="{{ original_target }}"
                                  hx-swap="innerHTML"
                              {% endif %}
                              class="space-y-3">
                            {% csrf_token %}
                            <input type="hidden" name="list_view_url" value="{{ list_view_url }}">
                            {% for key, values in request.GET.lists %}
                                {% if key != 'page' %}
                                    {% for value in values %}
                                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                                    {% endfor %}
                                {% endif %}
                            {% endfor %}
                            <div class="max-h-72 space-y-0 overflow-y-auto pr-1 text-sm">
                                {% for column in list_column_state.choices %}
                                    <label class="flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-0.5 hover:bg-base-200"
                                           data-powercrud-list-column-option="true">
                                        <span class="min-w-0 leading-5">
                                            <span class="block truncate">
                                                {{ column.label }}{% if column.is_default %}<span class="ml-1 align-super text-xs font-semibold text-base-content/60"
                                                      title="Default column"
                                                      aria-label="Default column">*</span>{% endif %}
                                            </span>
                                        </span>
                                        <input type="checkbox"
                                               class="checkbox checkbox-xs"
                                               name="visible_columns"
                                               value="{{ column.name }}"
                                               data-powercrud-list-column-checkbox="true"
                                               data-powercrud-initial-checked="{% if column.is_active %}true{% else %}false{% endif %}"
                                               {% if column.is_active %}checked{% endif %}>
                                    </label>
                                {% endfor %}
                            </div>
                            <div class="flex items-center justify-between gap-2 border-t border-base-300 pt-3">
                                <span class="text-xs text-base-content/60">* = Default</span>
                                <div class="flex justify-end gap-2">
                                    <button type="submit"
                                            name="list_columns_action"
                                            value="reset"
                                            class="btn btn-outline btn-sm">
                                        Reset
                                    </button>
                                    <button type="submit"
                                            name="list_columns_action"
                                            value="apply"
                                            class="btn btn-primary btn-sm">
                                        Save
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </details>
            {% endif %}

            <!-- Page Size Selector -->
            <form id="page-size-form" class="inline-flex items-center gap-1 whitespace-nowrap">
                <label for="page-size-select" class="sr-only">Page size</label>
                <label class="select select-bordered select-sm w-[10ch] cursor-pointer"
                       data-powercrud-tooltip="semantic"
                       data-tippy-content="Rows per page">
                    <select id="page-size-select"
                            class="cursor-pointer"
                            name="page_size"
                            data-powercrud-page-size-select="true">
                        {% for size in page_size_options %}
                            <option value="{{ size }}"
                                {% if request.GET.page_size == size %}
                                    selected
                                {% elif not request.GET.page_size and default_page_size == size %}
                                    selected
                                {% endif %}>{{ size }}</option>
                        {% endfor %}
                        <option value="all" {% if request.GET.page_size == 'all' or not request.GET.page_size and default_page_size is None %}selected{% endif %}>
                            All</option>
                    </select>
                </label>
                <span class="text-xs text-base-content/70">per page</span>
            </form>
            </div>
        </div>
    
        {% if filterset %}
        <div class="hidden py-2"
             id="filterCollapse">
            <div class="filter-panel-shell rounded-box border border-base-300 bg-base-300 shadow-sm">
            <div class="hidden border-b border-base-200 px-3 py-2"
                 data-powercrud-add-filter-container>
                {% if addable_filter_choices %}
                <label class="select select-bordered min-h-10 w-full max-w-xs border-base-content/20 bg-base-200 text-sm text-base-content shadow-sm">
                    <select data-powercrud-add-filter-select
                            data-powercrud-searchable-select="true"
                            data-powercrud-searchable-placeholder="Add filter…">
                        <option value="">Add filter…</option>
                        {% for option in addable_filter_choices %}
                            <option value="{{ option.name }}">{{ option.label }}</option>
                        {% endfor %}
                    </select>
                </label>
                {% endif %}
                {% if not use_htmx %}
                    <button type="submit"
                            form="filter-form"
                            class="btn btn-info btn-sm {{ view.get_extra_button_classes }}"
                            data-powercrud-filter-panel-action>
                        Filter
                    </button>
                {% endif %}
                <a href="."
                   class="btn btn-outline btn-sm {{ view.get_extra_button_classes }}"
                   hx-get="."
                   hx-target="{{ original_target }}"
                   hx-push-url="true"
                   data-powercrud-filter-panel-action
                   data-powercrud-filter-reset>
                    Reset filters
                </a>
            </div>
            <form id="filter-form" method="get" class="grid gap-x-2 gap-y-0" hx-target="#filtered_results" hx-push-url="true"
                hx-replace-url="true" hx-headers='{"X-Filter-Sort-Request": "true", "X-Filter-Setting-Request": "true"}'
                action="{{ request.path }}"
                data-powercrud-filter-form="true">
                <div class="hidden" data-powercrud-visible-filters-state>
                    {% for field_name in persisted_optional_filter_names %}
                        <input type="hidden" name="{{ visible_filter_param_name }}" value="{{ field_name }}">
                    {% endfor %}
                </div>
                {% for field in visible_filter_fields %}
                <div class="filter-field form-control w-full min-w-0">
                    <div class="filter-field-shell">
                    <label class="filter-field-label label">
                        <span class="label-text block w-full text-xs font-medium text-base-content/80">{{ field.label }}</span>
                    </label>
                    <div class="filter-field-input">
                        {{ field }}
                    </div>
                        {% if field.name in persisted_optional_filter_names %}
                            <button type="button"
                                    class="filter-field-action btn btn-ghost btn-xs text-error/45 hover:bg-error/10 hover:text-error"
                                    data-powercrud-remove-filter="{{ field.name }}"
                                    aria-label="Remove {{ field.label }} filter"
                                    title="Remove {{ field.label }} filter">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 16 16"
                                     fill="none"
                                     stroke="currentColor"
                                     stroke-width="1.75"
                                     stroke-linecap="round"
                                     stroke-linejoin="round"
                                     aria-hidden="true">
                                    <path d="M4 4l8 8M12 4l-8 8"/>
                                </svg>
                                <span class="sr-only">Remove {{ field.label }} filter</span>
                            </button>
                        {% else %}
                            <span class="filter-field-action btn btn-ghost btn-xs invisible pointer-events-none"
                                  aria-hidden="true">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 16 16"
                                     fill="none"
                                     stroke="currentColor"
                                     stroke-width="1.75"
                                     stroke-linecap="round"
                                     stroke-linejoin="round">
                                    <path d="M4 4l8 8M12 4l-8 8"/>
                                </svg>
                            </span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </form>
            </div>
        </div>
        {% endif %}

        <!-- Hidden fields to preserve current filter and sort parameters -->
        {% for key, values in request.GET.lists %}
            {% if key != 'page_size' and key != 'page' and key != visible_filter_param_name %}
                {% for value in values %}
                    {% if filterset and key not in filterset.form.fields %}
                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                    {% elif not filterset %}
                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}

        <div id="filtered_results">
            {% partial filtered_results %}
        </div>
    </div>

    {% include framework_template_path|add:"/partial/modal.html" %}

{% endpartialdef pcrud_content %}

{% partialdef bulk_selection_status %}
<!-- Bulk actions container - show/hide based on selection count -->
<div id="bulk-actions-container" 
    class="join {% if selected_count == 0 %}hidden{% endif %}" 
    data-powercrud-bulk-actions="true"
    hx-target="this" 
    hx-swap="outerHTML" 
    hx-trigger="bulkSelectionChanged from:body">
    <a href="{{ list_view_url }}bulk-edit/" class="join-item btn btn-sm btn-primary {{ view.get_extra_button_classes }}"
        hx-get="{{ list_view_url }}bulk-edit/" 
        hx-target="#{{ modal_target|default:'powercrudModalContent' }}"
        hx-swap="innerHTML"
        data-powercrud-modal-trigger="true"
        data-powercrud-modal-box-classes="{{ bulk_modal_box_classes|default:'modal-box flex max-h-[calc(100dvh-2rem)] flex-col' }}"
        onclick="document.getElementById('{{ modal_id|default:'powercrudBaseModal' }}').showModal();">
        Bulk Edit <span id="selected-items-counter">{{ selected_count }}</span>
    </a>
    <button class="join-item btn btn-sm btn-outline btn-error {{ view.get_extra_button_classes }}"
            data-powercrud-clear-selection
            hx-post="{{ list_view_url }}clear-selection/"
            hx-target="#bulk-actions-container"
            hx-swap="outerHTML">
        Clear Selection
    </button>
</div>
{% endpartialdef bulk_selection_status %}

{% partialdef filtered_results %}
    {% if show_record_count or show_bulk_selection_meta %}
        <div class="mb-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-base-content/70"
             data-powercrud-results-meta="true">
            {% if show_record_count %}
                <div>
                    {% if is_paginated and record_count_total > 0 %}
                        Showing {{ record_count_start }}-{{ record_count_end }} of {{ record_count_total }}
                        {% if record_count_has_active_filters %}matching{% else %}total{% endif %}
                        record{{ record_count_total|pluralize }}
                    {% else %}
                        {{ record_count_total }}
                        {% if record_count_has_active_filters %}matching{% else %}total{% endif %}
                        record{{ record_count_total|pluralize }}
                    {% endif %}
                </div>
            {% endif %}
            {% if show_bulk_selection_meta %}
                <div class="flex items-center gap-2">
                    {% if show_select_all_matching %}
                        <button type="button"
                                class="link link-primary text-sm font-medium"
                                hx-post="{{ list_view_url }}select-all-matching/{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}"
                                hx-target="#bulk-actions-container"
                                hx-swap="outerHTML">
                            {{ select_all_matching_label }}
                        </button>
                    {% elif show_select_all_matching_limit %}
                        <span class="text-xs text-base-content/70">
                            {{ bulk_selection_meta_message }}
                        </span>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    {% endif %}
    {% if object_list %}
        {% object_list object_list view %}
        {% partial pagination %}
    {% else %}
        <p class="mt-4">
            There are no {{ object_verbose_name_plural }}.{% if create_view_url %} Create one now?{% endif %}
        </p>
    {% endif %}
{% endpartialdef filtered_results %}


{% partialdef pagination %}
{% if is_paginated %}
<nav aria-label="Page navigation" class="mt-4" data-powercrud-pagination="true">
    <ul class="join flex justify-center">
        {% if page_obj.has_previous %}
        <li>
            <a class="join-item btn btn-sm"
                href="?page={{ page_obj.previous_page_number }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}"
                {% if use_htmx and original_target %} 
                    hx-get="?page={{ page_obj.previous_page_number }}"
                    hx-vals="js:{...getCurrentFilters()}" hx-headers='{"X-Filter-Sort-Request": "true"}'
                    hx-target="#filtered_results" 
                    hx-replace-url="true" hx-push-url="true" 
                {% endif %}>Previous
            </a>
        </li>
        
        {% endif %}

        {% get_proper_elided_page_range paginator page_obj.number as page_range %}
        {% for i in page_range %}
            {% if i == "..." %}
            <li><span class="join-item btn btn-sm btn-disabled">…</span></li>
            {% else %}
            <li>
                <a class="join-item btn btn-sm {% if page_obj.number == i %}btn-active{% endif %}"
                    href="?page={{ i }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}"
                    {% if use_htmx and original_target %}
                        hx-get="?page={{ i }}" 
                        hx-vals="js:{...getCurrentFilters()}" hx-headers='{"X-Filter-Sort-Request": "true"}' 
                        hx-target="#filtered_results" 
                        hx-replace-url="true" hx-push-url="true" 
                    {% endif %}>{{ i }}
                </a>
            </li>
            
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
        <li>
            <a class="join-item btn btn-sm"
                href="?page={{ page_obj.next_page_number }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}"
                {% if use_htmx and original_target %} 
                    hx-get="?page={{ page_obj.next_page_number }}"
                    hx-vals="js:{...getCurrentFilters()}" hx-headers='{"X-Filter-Sort-Request": "true"}' 
                    hx-target="#filtered_results" 
                    hx-replace-url="true" hx-push-url="true" 
                {%endif %}>Next
            </a>
        </li>
        {%endif %}

    </ul>
</nav>
{% endif %}
{% endpartialdef pagination %}