Warning for unsaved changes when navigating away

<!-- Иконка/Checkbox внутри AlertDialogContent не монтируются в закрытом состоянии; путь lucide "credit-card" (ближайший аналог "CardSimIcon"). -->
<script setup lang="ts">
import { Frame, FramePanel } from "@/components/reui/frame"
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">Discard Changes</Button>
    </AlertDialogTrigger>
    <AlertDialogContent class="overflow-hidden p-0! ring-0">
      <Frame class="p-px">
        <FramePanel>
          <div class="flex items-start gap-3">
            <div class="rounded-full flex size-10 shrink-0 items-center justify-center border border-amber-100 bg-amber-50 text-amber-500 dark:bg-amber-950 dark:text-amber-300">
              <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"
                class="size-5"
              ><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
            </div>
            <div class="flex flex-col justify-center gap-1">
              <AlertDialogTitle class="text-sm font-semibold">Unsaved changes</AlertDialogTitle>
              <AlertDialogDescription class="text-muted-foreground text-sm">
                You have unsaved changes in this form. If you leave now, your progress will be lost.
              </AlertDialogDescription>
            </div>
          </div>
          <AlertDialogFooter class="mt-6 items-center gap-4 sm:justify-between">
            <div class="flex items-center gap-2">
              <Checkbox id="dont-ask-again" />
              <Label for="dont-ask-again" class="text-muted-foreground font-normal">Don't ask again</Label>
            </div>
            <div class="flex items-center gap-2">
              <AlertDialogCancel>Stay</AlertDialogCancel>
              <AlertDialogAction>Discard Changes</AlertDialogAction>
            </div>
          </AlertDialogFooter>
        </FramePanel>
      </Frame>
    </AlertDialogContent>
  </AlertDialog>
</template>