Rows per page select with range info and first/prev/next/last icons

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "chevron-first"/"chevron-left"/"chevron-right"/
  "chevron-last") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { Pagination, PaginationContent, PaginationItem, PaginationLink } from "@/components/ui/pagination"
</script>

<template>
  <Pagination>
    <PaginationContent class="w-full justify-between">
      <PaginationItem class="flex items-center gap-2">
        <span class="text-muted-foreground text-sm whitespace-nowrap">Rows per page</span>
        <NativeSelect class="w-18" default-value="25">
          <NativeSelectOption value="10">10</NativeSelectOption>
          <NativeSelectOption value="25">25</NativeSelectOption>
          <NativeSelectOption value="50">50</NativeSelectOption>
          <NativeSelectOption value="100">100</NativeSelectOption>
        </NativeSelect>
      </PaginationItem>
      <PaginationItem class="flex items-center gap-3">
        <span class="text-muted-foreground text-sm whitespace-nowrap">1-25 of 100</span>
        <div class="flex gap-1">
          <PaginationLink href="#" size="icon" aria-label="Go to first page">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-first size-4">
              <path d="m17 18-6-6 6-6" />
              <path d="M7 6v12" />
            </svg>
          </PaginationLink>
          <PaginationLink href="#" size="icon" aria-label="Go to previous page">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left size-4">
              <path d="m15 18-6-6 6-6" />
            </svg>
          </PaginationLink>
          <PaginationLink href="#" size="icon" aria-label="Go to next page">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right size-4">
              <path d="m9 18 6-6-6-6" />
            </svg>
          </PaginationLink>
          <PaginationLink href="#" size="icon" aria-label="Go to last page">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-last size-4">
              <path d="m7 18 6-6-6-6" />
              <path d="M17 6v12" />
            </svg>
          </PaginationLink>
        </div>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>