Numbered pagination in card

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

const middlePages = [1, 2, 3]
const lastPages = [10, 11, 12]
</script>

<template>
  <Card class="p-2">
    <CardContent class="p-0">
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href="#" size="icon" aria-label="Go to previous page" class="hover:bg-muted h-8 w-8 rounded-full">
              <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>
          </PaginationItem>

          <PaginationItem v-for="page in middlePages" :key="page">
            <PaginationLink href="#" :is-active="page === 1" :class="page === 1 ? 'bg-primary text-primary-foreground hover:bg-primary/90' : 'hover:bg-muted'">{{ page }}</PaginationLink>
          </PaginationItem>

          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>

          <PaginationItem v-for="page in lastPages" :key="page">
            <PaginationLink href="#">{{ page }}</PaginationLink>
          </PaginationItem>

          <PaginationItem>
            <PaginationLink href="#" size="icon" aria-label="Go to next page" class="hover:bg-muted h-8 w-8 rounded-full">
              <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>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </CardContent>
  </Card>
</template>