<.dm_modal id="dialog-single-default">
  <:trigger :let={id}>
    <.dm_btn variant="primary" command="show-modal" commandfor={id}>Open</.dm_btn>
  </:trigger>
  <:title>Confirm Action</:title>
  <:body>
    <p>Are you sure you want to proceed?</p>
  </:body>
  <:footer>
    <.dm_btn variant="ghost" command="close" commandfor="dialog-default">Cancel</.dm_btn>
    <.dm_btn variant="primary" command="close" commandfor="dialog-default">Confirm</.dm_btn>
  </:footer>
</.dm_modal>

<.dm_modal id="dialog-single-hide-close-button" hide_close>
  <:trigger :let={id}>
    <.dm_btn command="show-modal" commandfor={id}>Open</.dm_btn>
  </:trigger>
  <:title>No Close Button</:title>
  <:body><p>The X close button is hidden.</p></:body>
  <:footer>
    <.dm_btn variant="primary" command="close" commandfor="dialog-no-close">OK</.dm_btn>
  </:footer>
</.dm_modal>

<.dm_modal id="dialog-sizes-size-sm" size="sm">
  <:trigger :let={id}>
    <.dm_btn command="show-modal" commandfor={id}>SM</.dm_btn>
  </:trigger>
  <:title>SM Dialog</:title>
  <:body><p>SM sized modal.</p></:body>
</.dm_modal>
<.dm_modal id="dialog-sizes-size-lg" size="lg">
  <:trigger :let={id}>
    <.dm_btn command="show-modal" commandfor={id}>LG</.dm_btn>
  </:trigger>
  <:title>LG Dialog</:title>
  <:body><p>LG sized modal.</p></:body>
</.dm_modal>
<.dm_modal id="dialog-sizes-size-xl" size="xl">
  <:trigger :let={id}>
    <.dm_btn command="show-modal" commandfor={id}>XL</.dm_btn>
  </:trigger>
  <:title>XL Dialog</:title>
  <:body><p>XL sized modal.</p></:body>
</.dm_modal>

<.dm_modal id="dialog-positions-top" position="top">
  <:trigger :let={id}>
    <.dm_btn command="show-modal" commandfor={id}>Top</.dm_btn>
  </:trigger>
  <:title>Top Position</:title>
  <:body><p>Modal anchored to the top of the viewport.</p></:body>
</.dm_modal>
<.dm_modal id="dialog-positions-middle" position="middle">
  <:trigger :let={id}>
    <.dm_btn command="show-modal" commandfor={id}>Middle</.dm_btn>
  </:trigger>
  <:title>Middle Position</:title>
  <:body><p>Modal anchored to the middle of the viewport.</p></:body>
</.dm_modal>
<.dm_modal id="dialog-positions-bottom" position="bottom">
  <:trigger :let={id}>
    <.dm_btn command="show-modal" commandfor={id}>Bottom</.dm_btn>
  </:trigger>
  <:title>Bottom Position</:title>
  <:body><p>Modal anchored to the bottom of the viewport.</p></:body>
</.dm_modal>