Dialog

---
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from "@/components/starwind/dialog";
import { Button } from "@/components/starwind/button";
---

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Example Dialog</DialogTitle>
      <DialogDescription>
        This is a simple dialog example that demonstrates the basic functionality.
      </DialogDescription>
    </DialogHeader>
    <div class="py-4">Your dialog content goes here.</div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save Changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

---
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from "@/components/starwind/dialog";

import { Input } from "@/components/starwind/input";

import { Label } from "@/components/starwind/label";

import { Button } from "@/components/starwind/button";
---

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Edit Profile</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-[450px]" animationDuration={200}>
    <form id="edit-profile-form" method="dialog" class="flex flex-col gap-4">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you're done.
        </DialogDescription>
      </DialogHeader>
      <div class="grid gap-6 py-4">
        <div class="grid md:grid-cols-4 items-center gap-2 md:gap-4">
          <Label for="name-edit" class="md:text-right"> Name </Label>
          <Input id="name-edit" placeholder="Pedro Duarte" class="md:col-span-3" />
        </div>
        <div class="grid md:grid-cols-4 items-center gap-2 md:gap-4">
          <Label for="username" class="md:text-right"> Username </Label>
          <Input id="username" placeholder="@peduarte" class="md:col-span-3" />
        </div>
      </div>
      <DialogFooter>
        <DialogClose asChild>
          <Button type="button" variant="outline">Cancel</Button>
        </DialogClose>
        <Button type="submit">Save changes</Button>
      </DialogFooter>
    </form>
  </DialogContent>
</Dialog>

<script>
  const setupForm = () => {
    const form = document.getElementById("edit-profile-form") as HTMLFormElement;
    if (!form) return;

    form.addEventListener("submit", (e) => {
      e.preventDefault();

      console.log("Form submission data:", {
        name: (form.querySelector("#name-edit") as HTMLInputElement)?.value,
        username: (form.querySelector("#username") as HTMLInputElement)?.value,
      });
    });
  };

  setupForm();

  document.addEventListener("astro:after-swap", setupForm);
</script>