Modal

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

<.modal id="basic-modal">
  <h3 class="text-lg font-semibold dark:text-zinc-100">A basic modal component</h3>
  <p class="text-zinc-500 dark:text-zinc-400 mt-2">
    This is an example of a basic modal component.
  </p>

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

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

<.modal id="modal-size-max-w-xl" class="max-w-xl w-full">
  <h3>A responsive max-width modal</h3>
  <.button phx-click={Fluxon.close_dialog("modal-size-max-w-xl")}>Cancel</.button>
</.modal>

<.modal id="modal-size-400px" class="w-[400px]">
  <h3>A fixed-width modal</h3>
  <.button phx-click={Fluxon.close_dialog("modal-size-400px")}>Cancel</.button>
</.modal>

<.modal id="modal-size-w-full" class="w-full">
  <h3>A full-width modal</h3>
  <.button phx-click={Fluxon.close_dialog("modal-size-w-full")}>Cancel</.button>
</.modal>

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

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

  <div class="flex justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("basic-modal")}>Cancel</.button>
    <.button variant="solid" color="blue">Some action</.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 bg-opacity-10 backdrop-blur-lg">
  <p>Frosted Glass</p>
</.modal>

<.modal id="backdrop-blackout" class="max-w-lg" backdrop_class="bg-black">
  <p>Blackout</p>
</.modal>

<.modal id="backdrop-subtle-transparency" class="max-w-lg" backdrop_class="bg-black bg-opacity-20">
  <p>Light Dimming</p>
</.modal>

<.modal id="backdrop-blue" class="max-w-lg" backdrop_class="bg-blue-950 bg-opacity-90 backdrop-blur-xs">
  <p>Blue Opacity</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>