{% macro render_pagination(pagination, endpoint) %}
{% if pagination.total %}
<nav class="flex flex-col gap-3 border-t border-line px-5 py-4 sm:flex-row sm:items-center sm:justify-between" aria-label="分页">
  <div class="text-sm text-textSub">
    共 <span class="font-bold text-textMain">{{ pagination.total }}</span> 条记录，
    第 <span class="font-bold text-textMain">{{ pagination.page }}</span> / {{ pagination.pages }} 页
  </div>
  {% if pagination.pages > 1 %}
  <div class="flex flex-wrap items-center gap-2">
    {% set prev_page = pagination.prev_num if pagination.has_prev else pagination.page %}
    <a
      class="ui-btn ui-btn-sm ui-btn-secondary {{ 'pointer-events-none opacity-50' if not pagination.has_prev }}"
      href="{{ url_for(endpoint, page=prev_page) }}"
      aria-disabled="{{ 'false' if pagination.has_prev else 'true' }}"
    >
      <span class="material-symbols-outlined text-lg">chevron_left</span>
      上一页
    </a>
    <div class="flex items-center gap-1">
      {% for page in pagination.iter_pages(left_edge=1, left_current=1, right_current=2, right_edge=1) %}
        {% if page %}
          <a
            class="inline-flex h-10 min-w-10 items-center justify-center rounded-md border px-3 text-sm font-bold {{ 'border-primary bg-primary text-white' if page == pagination.page else 'border-line bg-white text-slate-600 hover:border-primary hover:text-primary' }}"
            href="{{ url_for(endpoint, page=page) }}"
            aria-current="{{ 'page' if page == pagination.page else 'false' }}"
          >{{ page }}</a>
        {% else %}
          <span class="inline-flex h-10 min-w-10 items-center justify-center text-sm font-bold text-textSub">...</span>
        {% endif %}
      {% endfor %}
    </div>
    {% set next_page = pagination.next_num if pagination.has_next else pagination.page %}
    <a
      class="ui-btn ui-btn-sm ui-btn-secondary {{ 'pointer-events-none opacity-50' if not pagination.has_next }}"
      href="{{ url_for(endpoint, page=next_page) }}"
      aria-disabled="{{ 'false' if pagination.has_next else 'true' }}"
    >
      下一页
      <span class="material-symbols-outlined text-lg">chevron_right</span>
    </a>
  </div>
  {% endif %}
</nav>
{% endif %}
{% endmacro %}