{{ define "user/fragments/editAvatar" }}
<form
  hx-post="/profile/avatar"
  hx-encoding="multipart/form-data"
  hx-swap="none"
  class="flex flex-col gap-2 group/form">
  <label for="avatar-file" class="uppercase p-0">
    Upload or Remove Avatar
  </label>
  <p class="text-sm text-gray-500 dark:text-gray-400">Upload a new image (PNG or JPEG, max 1MB) or remove your current avatar.</p>
  <input
    type="file"
    id="avatar-file"
    name="avatar"
    accept="image/png,image/jpeg"
    required
    class="block w-full text-sm text-gray-500 dark:text-gray-400
      file:mr-4 file:py-2 file:px-4
      file:rounded file:border-0
      file:text-sm file:font-semibold
      file:bg-gray-100 file:text-gray-700
      dark:file:bg-gray-700 dark:file:text-gray-300
      hover:file:bg-gray-200 dark:hover:file:bg-gray-600" />
  <div class="flex flex-col gap-2 pt-2">
    <button type="submit" class="btn w-full flex items-center justify-center gap-2">
        {{ i "upload" "size-4 inline group-[.htmx-request]/form:hidden" }} 
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
        upload
    </button>
    {{ if .Profile.Avatar }}
      <button
        type="button"
        hx-delete="/profile/avatar"
        hx-confirm="Are you sure you want to remove your profile picture?"
        hx-swap="none"
        class="btn w-full flex items-center justify-center gap-2 group">
        {{ i "trash-2" "size-4 inline group-[.htmx-request]:hidden" }}
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        remove avatar
      </button>
    {{ end }}
    <button
      id="cancel-avatar-btn"
      type="button"
      popovertarget="avatar-upload-modal"
      popovertargetaction="hide"
      class="btn text-red-500 dark:text-red-400 w-full flex items-center justify-center gap-2">
      {{ i "x" "size-4" }}
      cancel
    </button>
  </div>
  <div id="avatar-error" class="text-red-500 dark:text-red-400 text-sm"></div>
</form>
{{ end }}