{{ define "user/settings/fragments/dangerPasswordToken" }}
<div id="password-form-container" hx-swap-oob="innerHTML">
  <label class="uppercase text-sm font-bold p-0">Change password</label>
  <p class="text-sm text-gray-500 dark:text-gray-400 pt-1">Check your email for a password reset code.</p>
  <form hx-post="/settings/password/reset" hx-swap="none" hx-disabled-elt="find button[type='submit']" class="flex flex-col gap-3 pt-2">
    <div class="flex flex-col">
      <label for="token">reset code</label>
      <input type="text" id="token" name="token" required autocomplete="off" placeholder="xxxx-xxxx" />
    </div>
    <div class="flex flex-col">
      <label for="new-password">new password</label>
      <input type="password" id="new-password" name="new_password" required autocomplete="new-password" />
    </div>
    <div class="flex flex-col">
      <label for="confirm-password">confirm new password</label>
      <input type="password" id="confirm-password" name="confirm_password" required autocomplete="new-password" />
    </div>
    <div class="flex gap-2 pt-2">
      <button type="button" popovertarget="change-password-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">cancel</button>
      <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2">set new password</button>
    </div>
    <div id="password-error" class="text-red-500 dark:text-red-400 text-sm empty:hidden"></div>
  </form>
</div>
{{ end }}