<.button phx-click={JS.push("psb-assign", value: %{show: true})} text="Open me"/>
<.modal
  id="modal-single-default"
  overlay_close
  close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :default})}
>
  <.modal_header title="Fancy title with icon" icon="fas fa-bullhorn"
    close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :default})}
  />
  <.modal_body class="text-center">
    <p class="text-default-txt">
      Some modal content here
    </p>
  </.modal_body>
  <.modal_footer>
    <.button text="Confirm"/>
  </.modal_footer>
</.modal>

<.button phx-click={JS.push("psb-assign", value: %{show: true})} text="Open me"/>
<.modal
  id="modal-single-with-sidebar"
  with_sidebar
  overlay_close
  close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :with_sidebar})}
>
  <.modal_header title="Fancy title with an icon" icon="fas fa-bullhorn"
    close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :with_sidebar})}
    with_sidebar={true}/>
  <.modal_sidebar class="text-center">
    <p class="text-default-txt pb-24">
      Some sidebar content here
    </p>
    <.modal_sidebar_footer>
      <.button icon="fa fa-check" text="Confirm" class="w-full"/>
    </.modal_sidebar_footer>
  </.modal_sidebar>
  <.modal_body class="text-center" with_sidebar={true}>
    <p class="text-default-txt">
      Some modal content here
    </p>
  </.modal_body>
</.modal>

<.button phx-click={JS.push("psb-assign", value: %{show: true})} text="Open me"/>
<.modal
  id="modal-single-minimal-modal"
  overlay_close
  close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :minimal_modal})}
>
  <.modal_header close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :minimal_modal})}
  />
  <.modal_body class="text-center">
    <p class="text-default-txt">
      Some modal content here
    </p>
  </.modal_body>
</.modal>

<.button phx-click={JS.push("psb-assign", value: %{show: true})} text="Open me"/>
<.modal
  id="modal-single-full-screen-modal"
  full_screen
  overlay_close
  close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :full_screen_modal})}
>
  <.modal_header title="Fancy title with icon" icon="fas fa-bullhorn" full_screen={true}
    close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :full_screen_modal})}
  />
  <.modal_body class="text-center" full_screen={true}>
    <p class="text-default-txt">
      Some modal content here
    </p>
  </.modal_body>
  <.modal_footer full_screen={true}>
    <.button text="Confirm"/>
  </.modal_footer>
</.modal>