<div class="flex items-center gap-4">
  <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-xs transition-colors hover:bg-primary/90" onclick="this.parentElement.querySelector('dialog').dispatchEvent(new Event('phx-shadcn:show'))">Open Alert Dialog</button>
  <.alert_dialog
    id="alert-dialog-single-default"
    on_cancel={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}
  >
    <.alert_dialog_header>
      <.alert_dialog_title id="alert-dialog-default-title">Are you absolutely sure?</.alert_dialog_title>
      <.alert_dialog_description id="alert-dialog-default-description">
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </.alert_dialog_description>
    </.alert_dialog_header>
    <.alert_dialog_footer>
      <.alert_dialog_cancel on_cancel={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}>
        <.button variant="outline">Cancel</.button>
      </.alert_dialog_cancel>
      <.alert_dialog_action>
        <.button phx-click={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}>Continue</.button>
      </.alert_dialog_action>
    </.alert_dialog_footer>
  </.alert_dialog>
</div>

<div class="flex items-center gap-4">
  <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-xs transition-colors hover:bg-primary/90" onclick="this.parentElement.querySelector('dialog').dispatchEvent(new Event('phx-shadcn:show'))">Delete Account</button>
  <.alert_dialog
    id="alert-dialog-single-destructive"
    on_cancel={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}
  >
    <.alert_dialog_header>
      <.alert_dialog_title id="alert-dialog-destructive-title">Delete account?</.alert_dialog_title>
      <.alert_dialog_description id="alert-dialog-destructive-description">
        This will permanently delete your account and all associated data.
        This action cannot be reversed.
      </.alert_dialog_description>
    </.alert_dialog_header>
    <.alert_dialog_footer>
      <.alert_dialog_cancel on_cancel={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}>
        <.button variant="outline">Cancel</.button>
      </.alert_dialog_cancel>
      <.alert_dialog_action>
        <.button variant="destructive" phx-click={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}>
          Yes, delete account
        </.button>
      </.alert_dialog_action>
    </.alert_dialog_footer>
  </.alert_dialog>
</div>

<div class="flex items-center gap-4">
  <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-xs transition-colors hover:bg-primary/90" onclick="this.parentElement.querySelector('dialog').dispatchEvent(new Event('phx-shadcn:show'))">Open Wide Alert</button>
  <.alert_dialog
    id="alert-dialog-single-custom-width"
    class="sm:max-w-2xl"
    on_cancel={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}
  >
    <.alert_dialog_header>
      <.alert_dialog_title id="alert-dialog-wide-title">Review changes</.alert_dialog_title>
      <.alert_dialog_description id="alert-dialog-wide-description">
        The following changes will be applied to your production environment.
        Please review carefully before proceeding.
      </.alert_dialog_description>
    </.alert_dialog_header>
    <p class="text-sm text-muted-foreground">
      This wider alert dialog gives more room for detailed content.
    </p>
    <.alert_dialog_footer>
      <.alert_dialog_cancel on_cancel={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}>
        <.button variant="outline">Cancel</.button>
      </.alert_dialog_cancel>
      <.alert_dialog_action>
        <.button phx-click={Phoenix.LiveView.JS.dispatch("phx-shadcn:hide")}>Apply Changes</.button>
      </.alert_dialog_action>
    </.alert_dialog_footer>
  </.alert_dialog>
</div>