{% from "_custom_select.html" import custom_select %}
{# Minimal bar: LEFT total count | MIDDLE pager (same control pattern as Commit History modal) | RIGHT per-page picker. Always shown. #}
{% macro render_pagination(current_page, total_pages, limit, endpoint, extra_params={}, total_count=none, item_noun='items') %}
{% set is_unlimited = (limit is none) or (limit == 'unlimited') %}
{% set lim_q = 'unlimited' if is_unlimited else limit %}
{% set eff_pages = total_pages if total_pages > 0 else 1 %}
{% set pagination_options = [
  {"value": url_for(endpoint, page=1, limit='5', **extra_params), "label": "5"},
  {"value": url_for(endpoint, page=1, limit='10', **extra_params), "label": "10"},
  {"value": url_for(endpoint, page=1, limit='25', **extra_params), "label": "25"},
  {"value": url_for(endpoint, page=1, limit='50', **extra_params), "label": "50"},
  {"value": url_for(endpoint, page=1, limit='unlimited', **extra_params), "label": "All"}
] %}
{% set _limit = 'unlimited' if is_unlimited else (limit|string) %}
{% set pagination_selected_url = url_for(endpoint, page=1, limit=_limit, **extra_params) %}
{% set pagination_selected_label = "All" if is_unlimited else (limit|string) %}
<div class="app-pagination-bar mt-8 border-t border-white/5 pt-5 pb-3">
    <div
        class="mx-auto max-w-5xl w-full grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 items-center px-4 lg:px-8">
        {# Left: total #}
        <div class="flex justify-center md:justify-start order-1 md:order-1 min-w-0">
            <p class="text-[10px] font-black uppercase tracking-widest text-zinc-500 text-center md:text-left leading-relaxed">
                Total <span class="text-zinc-300 tabular-nums">{{ total_count if total_count is not none else '—' }}</span>
                <span class="font-semibold normal-case text-zinc-400"> {{ item_noun }}</span>
            </p>
        </div>
        {# Center: first | prev | current | next | last (Commit History modal style) #}
        <div class="flex justify-center order-2 md:order-2">
            <div
                class="inline-flex items-center flex-wrap justify-center gap-1.5 p-1 bg-white/5 rounded-xl border border-white/5 shadow-sm">
                {% if not is_unlimited %}
                {# First #}
                {% if current_page > 1 %}
                <a href="{{ url_for(endpoint, page=1, limit=lim_q, **extra_params) }}" data-spa-link
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-400 hover:text-white hover:bg-white/10 transition-colors duration-300"
                    title="First page" aria-label="First page">
                    <i data-lucide="arrow-left-to-line" class="h-4 w-4"></i>
                </a>
                {% else %}
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-left-to-line" class="h-4 w-4"></i>
                </span>
                {% endif %}
                {# Prev #}
                {% if current_page > 1 %}
                <a href="{{ url_for(endpoint, page=current_page - 1, limit=lim_q, **extra_params) }}" data-spa-link
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-400 hover:text-white hover:bg-white/10 transition-colors duration-300"
                    title="Previous page" aria-label="Previous page">
                    <i data-lucide="arrow-left" class="h-4 w-4"></i>
                </a>
                {% else %}
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-left" class="h-4 w-4"></i>
                </span>
                {% endif %}
                {# Current page #}
                <div
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-xs font-bold text-white relative z-10 scale-105 pagination-theme-active shadow-lg"
                    style="background: rgb(var(--theme-r), var(--theme-g), var(--theme-b)); box-shadow: 0 0 12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.35);"
                    aria-current="page">
                    {{ current_page }}
                </div>
                {# Next #}
                {% if current_page < eff_pages %}
                <a href="{{ url_for(endpoint, page=current_page + 1, limit=lim_q, **extra_params) }}" data-spa-link
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-400 hover:text-white hover:bg-white/10 transition-colors duration-300"
                    title="Next page" aria-label="Next page">
                    <i data-lucide="arrow-right" class="h-4 w-4"></i>
                </a>
                {% else %}
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-right" class="h-4 w-4"></i>
                </span>
                {% endif %}
                {# Last #}
                {% if current_page < eff_pages %}
                <a href="{{ url_for(endpoint, page=eff_pages, limit=lim_q, **extra_params) }}" data-spa-link
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-400 hover:text-white hover:bg-white/10 transition-colors duration-300"
                    title="Last page" aria-label="Last page">
                    <i data-lucide="arrow-right-to-line" class="h-4 w-4"></i>
                </a>
                {% else %}
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-right-to-line" class="h-4 w-4"></i>
                </span>
                {% endif %}
                {% else %}
                {# Unlimited: show static single-page control #}
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-left-to-line" class="h-4 w-4"></i>
                </span>
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-left" class="h-4 w-4"></i>
                </span>
                <div
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-xs font-bold text-white relative z-10 scale-105 pagination-theme-active shadow-lg"
                    style="background: rgb(var(--theme-r), var(--theme-g), var(--theme-b)); box-shadow: 0 0 12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.35);">
                    1
                </div>
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-right" class="h-4 w-4"></i>
                </span>
                <span
                    class="w-10 h-10 flex items-center justify-center rounded-xl text-zinc-700 cursor-not-allowed"
                    aria-hidden="true">
                    <i data-lucide="arrow-right-to-line" class="h-4 w-4"></i>
                </span>
                {% endif %}
            </div>
        </div>
        {# Right: per page (compact trigger opens modal picker) #}
        <div class="flex justify-center md:justify-end order-3 md:order-3 min-w-0">
            {{ custom_select(id="pagination-limit", options=pagination_options, selected_value=pagination_selected_url, selected_label=pagination_selected_label, mode="navigate", class="", picker_title="Items per page", compact=true) }}
        </div>
    </div>
</div>
{% endmacro %}