<.dm_modal id="modal-single-default">
  <:trigger :let={f}>
    <button class="btn btn-primary" onclick={"document.getElementById('#{f}').showModal()"}>Open</button>
  </:trigger>
  <:title>PhoenixDuskmoon</:title>
  <:body>PhoenixDuskmoon Storybook</:body>
</.dm_modal>

<.dm_modal id="modal-single-with-buttons">
  <:trigger :let={f}>
    <button class="btn btn-secondary" onclick={"document.getElementById('#{f}').showModal()"}>Open</button>
  </:trigger>
  <:title>
    PhoenixDuskmoon
  </:title>
  <:body>
    PhoenixDuskmoonb Storybook
    Show Modal
  </:body>
  <:footer >
    <form method="dialog">
    <button class="btn">
      Cancel
    </button>
    </form>
    <button class="btn">
      OK
    </button>
  </:footer>
</.dm_modal>

<.dm_modal id="modal-single-without-title-and-close" hide_close>
  <:trigger :let={f}>
    <button class="btn btn-accent" onclick={"document.getElementById('#{f}').showModal()"}>Open</button>
  </:trigger>
  <:body class="flex justify-center items-center text-4xl text-rose-600">
    <form method="dialog">
      <button>PhoenixDuskmoonb Is Awesome...</button>
    </form>
  </:body>
</.dm_modal>