<.sheet id="sheet-default">
  <.sheet_trigger>
    <.button variant="outline">Open Sheet</.button>
  </.sheet_trigger>
  <.sheet_content side="right">
    <.sheet_header>
      <.sheet_title>Edit profile</.sheet_title>
      <.sheet_description>
        Make changes to your profile here. Click save when you're done.
      </.sheet_description>
    </.sheet_header>
    <div class="grid gap-4 py-4">
      <div class="grid grid-cols-4 items-center gap-4">
        <.label for="name" class="text-right">
          Name
        </.label>
        <.input id="name" value="Pedro Duarte" class="col-span-3" />
      </div>
      <div class="grid grid-cols-4 items-center gap-4">
        <.label for="username" class="text-right">
          Username
        </.label>
        <.input id="username" value="@peduarte" class="col-span-3" />
      </div>
    </div>
    <.sheet_footer>
      <.sheet_close>
        <.button type="submit" phx-click="save">Save changes</.button>
      </.sheet_close>
    </.sheet_footer>
  </.sheet_content>
</.sheet>

<div class="flex flex-wrap gap-4">
  <.sheet id="sheet-left">
    <.sheet_trigger>
      <.button variant="outline">From Left</.button>
    </.sheet_trigger>
    <.sheet_content side="left">
      <.sheet_header>
        <.sheet_title>Left Sheet</.sheet_title>
        <.sheet_description>This sheet slides in from the left side.</.sheet_description>
      </.sheet_header>
      <.sheet_footer>
        <.sheet_close>
          <.button>Close</.button>
        </.sheet_close>
      </.sheet_footer>
    </.sheet_content>
  </.sheet>

  <.sheet id="sheet-right">
    <.sheet_trigger>
      <.button variant="outline">From Right</.button>
    </.sheet_trigger>
    <.sheet_content side="right">
      <.sheet_header>
        <.sheet_title>Right Sheet</.sheet_title>
        <.sheet_description>This sheet slides in from the right side.</.sheet_description>
      </.sheet_header>
      <.sheet_footer>
        <.sheet_close>
          <.button>Close</.button>
        </.sheet_close>
      </.sheet_footer>
    </.sheet_content>
  </.sheet>

  <.sheet id="sheet-top">
    <.sheet_trigger>
      <.button variant="outline">From Top</.button>
    </.sheet_trigger>
    <.sheet_content side="top">
      <.sheet_header>
        <.sheet_title>Top Sheet</.sheet_title>
        <.sheet_description>This sheet slides in from the top.</.sheet_description>
      </.sheet_header>
      <.sheet_footer>
        <.sheet_close>
          <.button>Close</.button>
        </.sheet_close>
      </.sheet_footer>
    </.sheet_content>
  </.sheet>

  <.sheet id="sheet-bottom">
    <.sheet_trigger>
      <.button variant="outline">From Bottom</.button>
    </.sheet_trigger>
    <.sheet_content side="bottom">
      <.sheet_header>
        <.sheet_title>Bottom Sheet</.sheet_title>
        <.sheet_description>This sheet slides in from the bottom.</.sheet_description>
      </.sheet_header>
      <.sheet_footer>
        <.sheet_close>
          <.button>Close</.button>
        </.sheet_close>
      </.sheet_footer>
    </.sheet_content>
  </.sheet>
</div>

<div class="space-y-4">
  <.sheet id="sheet-programmatic">
    <.sheet_content side="right">
      <.sheet_header>
        <.sheet_title>Programmatic Sheet</.sheet_title>
        <.sheet_description>
          This sheet is controlled programmatically from outside.
        </.sheet_description>
      </.sheet_header>
      <div class="py-4">
        <p>The sheet was opened using a JS command rather than a trigger.</p>
      </div>
      <.sheet_footer>
        <.sheet_close>
          <.button>Close</.button>
        </.sheet_close>
      </.sheet_footer>
    </.sheet_content>
  </.sheet>

  <.button phx-click={%JS{} |> SaladUI.LiveView.JS.dispatch_command("open", to: "#sheet-programmatic")}>
    Open Sheet Programmatically
  </.button>
</div>