{# ── Reusable pagination component ──
   A centered "load more" button for cursor-based pagination.

   Variables:
     next_cursor — str | None  (the cursor value for the next page)
     base_url    — str         (the URL to append ?after= to, e.g. /dashboard/myproj/search?q=foo)
#}

{% if next_cursor %}
  <div class="flex justify-center pt-4">
    <button hx-get="{{ base_url }}{% if '?' in base_url %}&{% else %}?{% endif %}after={{ next_cursor }}"
            hx-swap="innerHTML"
            class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium
                   text-primary-600 dark:text-primary-400
                   bg-primary-50 dark:bg-primary-900/20
                   hover:bg-primary-100 dark:hover:bg-primary-900/30
                   transition-colors">
      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
      </svg>
      {{ t("common.load_more") }}
    </button>
  </div>
{% endif %}