{% macro htmx_pagination(pagination, hx_endpoint, hx_target, method="POST", hx_swap="outerHTML") %}
    {% set current_page = pagination.current_page %}
    {% set total_items = pagination.total_items %}
    {% set page_size = pagination.page_size %}
    {% set page_sizes = pagination.page_sizes %}
    {% set total_pages = ((total_items - 1) // page_size + 1) if total_items > 0 else 1 %}
    {% set start_item = (current_page) * page_size + 1 %}
    {% set end_item = [(current_page + 1) * page_size, total_items] | min %}
    {% set is_post = method.upper() == 'POST' %}

    <link rel="stylesheet" href="{{ url_for('static', filename='components/pagination.css') }}">

    <div class="pagination-container">
        <div class="pagination-info">
        <span class="results-count">
            {% trans trimmed start=start_item|format_integer, end=end_item|format_integer, total=total_items|format_integer %}
                Showing {{ start }}–{{ end }} of {{ total }} results
            {% endtrans %}
        </span>
        </div>

        <div class="pagination-controls">
            <div class="page-size-selector">
                <label for="page-size-{{ hx_target|replace('#', '')|replace('.', '') }}">{{ _("Items per page:") }}</label>
                <select id="page-size-{{ hx_target|replace('#', '')|replace('.', '') }}"
                        name="page-size"
                        class="searchable-select"
                        data-search-disabled
                        {% if is_post %}hx-post{% else %}hx-get{% endif %}="{{ hx_endpoint }}"
                        hx-target="{{ hx_target }}"
                        hx-swap="{{ hx_swap }}"
                        hx-include="closest form"
                        hx-vals='js:{"page": 0, "page-size": event.target.value}'>
                    {% for size in page_sizes %}
                        <option value="{{ size }}"
                                {% if size == page_size %}selected{% endif %}>
                            {{ size | format_integer }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="page-navigation">
                <button type="button"
                        {% if is_post %}hx-post{% else %}hx-get{% endif %}="{{ hx_endpoint }}"
                        hx-target="{{ hx_target }}"
                        hx-swap="{{ hx_swap }}"
                        hx-include="closest form"
                        hx-vals='{"page": 0, "page-size": {{ page_size }}}'
                        class="page-btn {% if current_page == 0 %}disabled{% endif %}"
                        {% if current_page == 0 %}disabled{% endif %}>
                    &laquo; {{ _("First") }}
                </button>

                <button type="button"
                        {% if is_post %}hx-post{% else %}hx-get{% endif %}="{{ hx_endpoint }}"
                        hx-target="{{ hx_target }}"
                        hx-swap="{{ hx_swap }}"
                        hx-include="closest form"
                        hx-vals='{"page": {{ current_page - 1 }}, "page-size": {{ page_size }}}'
                        class="page-btn {% if current_page == 0 %}disabled{% endif %}"
                        {% if current_page == 0 %}disabled{% endif %}>
                    &lsaquo; {{ _("Previous") }}
                </button>

                <span class="page-info">
                {% trans trimmed page=(current_page + 1)|format_integer, total=total_pages|format_integer %}
                    Page {{ page }} of {{ total }}
                {% endtrans %}
            </span>

                <button type="button"
                        {% if is_post %}hx-post{% else %}hx-get{% endif %}="{{ hx_endpoint }}"
                        hx-target="{{ hx_target }}"
                        hx-swap="{{ hx_swap }}"
                        hx-include="closest form"
                        hx-vals='{"page": {{ current_page + 1 }}, "page-size": {{ page_size }}}'
                        class="page-btn {% if current_page >= total_pages-1 %}disabled{% endif %}"
                        {% if current_page >= total_pages - 1 %}disabled{% endif %}>
                    {{ _("Next") }} &rsaquo;
                </button>

                <button type="button"
                        {% if is_post %}hx-post{% else %}hx-get{% endif %}="{{ hx_endpoint }}"
                        hx-target="{{ hx_target }}"
                        hx-swap="{{ hx_swap }}"
                        hx-include="closest form"
                        hx-vals='{"page": {{ total_pages - 1 }}, "page-size": {{ page_size }}}'
                        class="page-btn {% if current_page >= total_pages - 1 %}disabled{% endif %}"
                        {% if current_page >= total_pages - 1 %}disabled{% endif %}>
                    {{ _("Last") }} &raquo;
                </button>
            </div>
        </div>
    </div>
{% endmacro %}