API keys table with permission badges and actions

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "copy", "rotate-ccw") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const apiKeys = [
  { name: "Production API", token: "sk_live_••••••••4f3a", permissions: ["read", "write"], lastUsed: "2 minutes ago", status: "Active", statusVariant: "success-light" as const },
  { name: "Staging API", token: "sk_test_••••••••8b2c", permissions: ["read", "write", "admin"], lastUsed: "1 hour ago", status: "Active", statusVariant: "success-light" as const },
  { name: "CI/CD Pipeline", token: "sk_ci_••••••••1d9e", permissions: ["read"], lastUsed: "3 days ago", status: "Active", statusVariant: "success-light" as const },
  { name: "Legacy Integration", token: "sk_old_••••••••7a5f", permissions: ["read", "write"], lastUsed: "30 days ago", status: "Expired", statusVariant: "destructive-light" as const },
]

const permissionVariant: Record<string, "outline" | "info-light" | "warning-light"> = {
  read: "outline",
  write: "info-light",
  admin: "warning-light",
}
</script>

<template>
  <Card class="mx-auto flex w-full max-w-2xl p-0">
    <CardContent class="p-0">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Key</TableHead>
            <TableHead>Permissions</TableHead>
            <TableHead>Status</TableHead>
            <TableHead class="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="key in apiKeys" :key="key.name">
            <TableCell>
              <div class="flex flex-col">
                <span class="text-sm font-medium">{{ key.name }}</span>
                <span class="text-muted-foreground text-xs">Last used: {{ key.lastUsed }}</span>
              </div>
            </TableCell>
            <TableCell>
              <code class="bg-muted rounded px-1.5 py-0.5 font-mono text-xs">{{ key.token }}</code>
            </TableCell>
            <TableCell>
              <div class="flex gap-1">
                <Badge v-for="perm in key.permissions" :key="perm" :variant="permissionVariant[perm] ?? 'outline'" size="xs">{{ perm }}</Badge>
              </div>
            </TableCell>
            <TableCell>
              <Badge :variant="key.statusVariant" size="sm">{{ key.status }}</Badge>
            </TableCell>
            <TableCell class="text-right">
              <div class="flex justify-end gap-1">
                <Button variant="ghost" size="icon" class="size-7">
                  <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-copy size-3.5">
                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
                  </svg>
                  <span class="sr-only">Copy key</span>
                </Button>
                <Button variant="ghost" size="icon" class="size-7">
                  <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-rotate-ccw size-3.5">
                    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
                    <path d="M3 3v5h5" />
                  </svg>
                  <span class="sr-only">Regenerate key</span>
                </Button>
              </div>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </CardContent>
  </Card>
</template>