Modal

<.button phx-click={Fluxon.open_dialog("basic-modal")}>
  Reset Password
</.button>

<.modal id="basic-modal" class="w-full max-w-[350px] flex flex-col gap-5 p-8 bg-white dark:bg-zinc-900">
  <div class="flex flex-col items-center justify-center">
    <div class="rounded-full p-3 flex items-center justify-center bg-linear-to-b from-gray-100 to-white dark:from-zinc-800 dark:to-zinc-900">
      <div class="border border-zinc-200 dark:border-zinc-700 rounded-full p-3 shadow-sm flex items-center justify-center bg-white dark:bg-zinc-800">
        <.icon name="u-lock-04" class="size-6 text-gray-600 dark:text-zinc-400" />
      </div>
    </div>

    <h3 class="font-medium text-lg text-zinc-700 dark:text-zinc-100 leading-snug mt-3">Reset Password</h3>
    <p class="text-zinc-500 dark:text-zinc-400 text-sm">
      Enter your email to reset your password.
    </p>
  </div>

  <hr class="border-dashed border-zinc-200 dark:border-zinc-800" />

  <div class="flex flex-col gap-3">
    <.input name="email" type="email" label="Email address" placeholder="john.doe@example.com" data-1p-ignore />
    <.button variant="solid">Reset Password</.button>
  </div>
</.modal>

<.button phx-click={Fluxon.open_dialog("modal-size-max-w-xl")}>Max width</.button>
<.button phx-click={Fluxon.open_dialog("modal-size-400px")}>Fixed width</.button>
<.button phx-click={Fluxon.open_dialog("modal-size-w-full")}>Full width</.button>

<.modal id="modal-size-max-w-xl" class="max-w-xl w-full">
  <h3 class="text-lg font-semibold dark:text-zinc-100">A responsive max-width modal</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This modal uses Tailwind's <code>max-w-xl</code> and <code>w-full</code> classes for a responsive design.
  </p>

  <div class="flex justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("modal-size-max-w-xl")}>Cancel</.button>
    <.button variant="solid">Some action</.button>
  </div>
</.modal>

<.modal id="modal-size-400px" class="w-[400px]">
  <h3 class="text-lg font-semibold dark:text-zinc-100">A fixed-width modal</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This modal has a fixed width of 400px.
  </p>

  <div class="flex justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("modal-size-400px")}>Cancel</.button>
    <.button variant="solid">Some action</.button>
  </div>
</.modal>

<.modal id="modal-size-w-full" class="w-full">
  <h3 class="text-lg font-semibold dark:text-zinc-100">A full-width modal</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This full-width modal spans the entire screen.
  </p>

  <div class="flex justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("modal-size-w-full")}>Cancel</.button>
    <.button variant="solid">Some action</.button>
  </div>
</.modal>

<.button phx-click={Fluxon.open_dialog("animation-modal-slide-up")}>Slide up</.button>
<.button phx-click={Fluxon.open_dialog("animation-modal-slide-down")}>Slide down</.button>
<.button phx-click={Fluxon.open_dialog("animation-modal-rotate")}>Rotating</.button>

<.modal
  id="animation-modal-slide-up"
  class="max-w-lg"
  animation_enter="opacity-100 translate-y-0"
  animation_leave="opacity-0 translate-y-20"
  animation="transition duration-200"
>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Slide up</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This is a modal with a slide up animation.
  </p>

  <div class="flex justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("animation-modal-slide-up")}>Cancel</.button>
    <.button phx-click={Fluxon.close_dialog("animation-modal-slide-up")} variant="solid">
      Some action
    </.button>
  </div>
</.modal>

<.modal
  id="animation-modal-slide-down"
  class="max-w-lg w-full"
  animation_enter="opacity-100 translate-y-0"
  animation_leave="opacity-0 -translate-y-20"
  animation="transition duration-200"
>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Slide down</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This is a modal with a slide down animation.
  </p>

  <div class="flex justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("animation-modal-slide-down")}>Cancel</.button>
    <.button phx-click={Fluxon.close_dialog("animation-modal-slide-down")} variant="solid">
      Some action
    </.button>
  </div>
</.modal>

<.modal
  id="animation-modal-rotate"
  class="max-w-lg w-full"
  animation_enter="opacity-100 rotate-0"
  animation_leave="opacity-0 rotate-180"
  animation="transition duration-200"
>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Rotating? You must be kidding me!</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This rotating modal animation is just here to show off. Use at your own risk!
  </p>

  <div class="flex flex-col md:flex-row justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("animation-modal-rotate")}>Unrotate</.button>
    <.button
      phx-click={Fluxon.close_dialog("animation-modal-rotate")}
      class="font-bold"
      color="success"
      variant="solid"
    >
      Roger that, no spinning modals in my code
    </.button>
  </div>
</.modal>

<.button phx-click={Fluxon.open_dialog("backdrop-frosted-glass")}>Frosted Glass</.button>
<.button phx-click={Fluxon.open_dialog("backdrop-blackout")}>Blackout</.button>
<.button phx-click={Fluxon.open_dialog("backdrop-subtle-transparency")}>Light Dimming</.button>
<.button phx-click={Fluxon.open_dialog("backdrop-blue")}>Blue Opacity</.button>

<.modal id="backdrop-frosted-glass" class="max-w-lg" backdrop_class="bg-black/10 backdrop-blur-lg">
  <h3 class="text-lg font-semibold dark:text-zinc-100">Frosted Glass</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This is a modal with a frosted glass backdrop.
  </p>
</.modal>

<.modal id="backdrop-blackout" class="max-w-lg" backdrop_class="bg-black">
  <h3 class="text-lg font-semibold dark:text-zinc-100">Blackout</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This is a modal with a blackout backdrop.
  </p>
</.modal>

<.modal id="backdrop-subtle-transparency" class="max-w-lg" backdrop_class="bg-black/10">
  <h3 class="text-lg font-semibold dark:text-zinc-100">Light Dimming</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This is a modal with a light dimming backdrop.
  </p>
</.modal>

<.modal id="backdrop-blue" class="max-w-lg" backdrop_class="bg-blue-500/30">
  <h3 class="text-lg font-semibold dark:text-zinc-100">Blue Opacity</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This is a modal with a blue opacity backdrop.
  </p>
</.modal>

<.button phx-click={Fluxon.open_dialog("modal-placement-top")}>Top</.button>

<.modal
  id="modal-placement-top"
  class="max-w-3xl"
  placement="top"
  animation_enter="opacity-100 translate-y-0"
  animation_leave="opacity-0 -translate-y-10"
>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Top</h3>
  <p>This is a modal with a top placement.</p>
</.modal>

<!--
  Available placements:

  top, bottom, left, right,
  full-left, full-right,
  full-top, full-bottom
-->

<.button phx-click={Fluxon.open_dialog("fixed-height-modal")}>Fixed wrapper height</.button>
<.button phx-click={Fluxon.open_dialog("scrollable-content-modal")}>Fixed content height</.button>

<.modal id="fixed-height-modal" class="h-[200px] overflow-y-auto">
  Modal content
</.modal>

<.modal id="scrollable-content-modal" class="p-0 max-w-2xl w-full mx-4">
  <header>Header content</header>
  <div class="overflow-y-auto max-h-[300px] sm:max-h-[400px]">
    Main scrollable content
  </div>
  <footer>Footer content</footer>
</.modal>

<.button phx-click={Fluxon.open_dialog("modal-closing-esc")}>Disabled ESC</.button>
<.button phx-click={Fluxon.open_dialog("modal-closing-outside")}>Disabled Outside Click</.button>
<.button phx-click={Fluxon.open_dialog("modal-closing-prevent")}>Prevent All Closing</.button>

<.modal class="max-w-md" id="modal-closing-esc" close_on_esc={false}>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Disabled ESC</h3>
  <p class="text-zinc-500 dark:text-zinc-400">
    This is a modal with a disabled ESC key, so it won't be closed by pressing the ESC key.
  </p>
</.modal>
<.modal class="max-w-md" id="modal-closing-outside" close_on_outside_click={false}>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Disabled Outside Click</h3>
  <p class="text-zinc-500 dark:text-zinc-400">
    This is a modal with a disabled outside click, so it won't be closed by clicking outside of it.
  </p>
</.modal>
<.modal class="max-w-md" id="modal-closing-prevent" prevent_closing={true}>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Aha! You can't close me!</h3>
  <p class="text-zinc-500 dark:text-zinc-400">
    I'm sorry, you now have to refresh the page to close me.
  </p>
</.modal>