<div data-controller="dialog">
  <button type="button" class="btn" data-action="dialog#showModal">Show dialog</button>
  <dialog class="dialog" style="--dialog-size: 430px;" data-dialog-target="menu" data-action="click->dialog#closeOnClickOutside" aria-label="Edit profile">
    <button type="button" class="btn btn--plain dialog__close" data-action="click->dialog#close">
      <img aria-hidden="true" src="/assets/x-2fabf707.svg" width="16" height="16" />
      <span class="sr-only">Close</span>
    </button>
    <div class="dialog__content">
      <form class="flex flex-col gap" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="2XbzE9IbWRuDvjyy_qwXjmD_1sDx0a9r_KLQkYJ7It6sXVK8d9ljyJ_gfReWBj53qp3E87JC4frdgb6IknP_hQ" autocomplete="off" />
        <div class="flex flex-col">
          <h3 class="font-semibold leading-none mbe-1">Edit profile</h3>
          <p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p>
        </div>
        <div class="flex flex-col gap mb-2">
          <div class="flex items-center gap">
            <label class="text-sm font-medium leading-none text-end" style="min-inline-size: 25%;" for="name">Name</label>
            <input value="Lázaro Nixon" class="input" type="text" name="name" id="name" />
          </div>
          <div class="flex items-center gap">
            <label class="text-sm font-medium leading-none text-end" style="min-inline-size: 25%;" for="username">Username</label>
            <input value="@lazaronixon" class="input" type="text" name="username" id="username" />
          </div>
        </div>
        <div class="flex items-center justify-end">
          <input type="submit" name="commit" value="Save changes" class="btn btn--primary" data-disable-with="Save changes" />
        </div>
      </form>
    </div>
  </dialog>
</div>