<.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="Valider"/>
  </.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="Valider" 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>