{{ define "onboarding/profile" }}
  {{ $profile := .EditBio.Profile }}
  <h1 class="text-2xl font-semibold dark:text-white">Welcome!</h1>
  <p class="text-base text-gray-500 dark:text-gray-400 mt-1">Let's get your profile ready. All fields are optional.</p>

  <div class="flex flex-col md:flex-row gap-6 mt-6">
    <div class="shrink-0 flex md:block justify-center">
      <form hx-post="/profile/avatar" hx-encoding="multipart/form-data" hx-swap="none" class="group">
        <input type="hidden" name="inline" value="true">
        <label class="p-0 size-40 rounded-full border border-gray-300 dark:border-gray-700
                      flex flex-col items-center justify-center gap-1 cursor-pointer overflow-hidden
                      text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800">
          <img id="onb-avatar" src="{{ profileAvatarUrl $profile "" }}"
               class="w-full h-full object-cover rounded-full group-[.htmx-request]:hidden {{ if not $profile.Avatar }}hidden{{ end }}">
          <div id="onb-avatar-placeholder" class="flex flex-col items-center justify-center gap-1 group-[.htmx-request]:hidden {{ if $profile.Avatar }}hidden{{ end }}">
            {{ i "camera" "size-6" }}
            <span class="text-sm">Upload picture</span>
          </div>
          {{ i "loader-circle" "size-6 animate-spin hidden group-[.htmx-request]:inline" }}
          <span class="text-sm hidden group-[.htmx-request]:inline">Uploading picture...</span>
          <input type="file" name="avatar" accept="image/png,image/jpeg" class="hidden"
                 onchange="onbPreviewAvatar(this)">
        </label>
        <p id="avatar-error" class="text-red-500 dark:text-red-400 text-sm mt-1 text-center"></p>
      </form>
    </div>

    <form hx-post="/welcome/profile" hx-swap="none" id="onb-profile-form" class="flex flex-col gap-4 flex-1">
      <div class="flex flex-col gap-1">
        <label for="onb-bio" class="flex items-center gap-2 text-sm font-medium dark:text-white">
          Bio
        </label>
        <input type="text" id="onb-bio" name="description" placeholder="Tell us about yourself"
               value="{{ $profile.Description }}" oninput="onbProfileChanged()">
      </div>

      <div class="flex flex-col gap-1">
        <label for="onb-pronouns" class="flex items-center gap-2 text-sm font-medium dark:text-white">
          Pronouns
        </label>
        <input type="text" id="onb-pronouns" name="pronouns" placeholder="they/them"
               value="{{ $profile.Pronouns }}" oninput="onbProfileChanged()">
      </div>

      <div class="flex flex-col gap-1">
        <label for="onb-website" class="flex items-center gap-2 text-sm font-medium dark:text-white">
          Website
        </label>
        <input type="text" id="onb-website" name="link0" placeholder="example.com"
               value="{{ index $profile.Links 0 }}" oninput="onbProfileChanged()">
      </div>

      <p id="update-profile" class="error"></p>

      <div class="flex justify-end mt-2">
        <button id="onb-next" type="submit" class="btn-flat w-fit flex items-center gap-2 text-sm">
          Next {{ i "arrow-right" "size-4" }}
        </button>
      </div>
    </form>
  </div>

  <script>
    function onbProfileChanged() {
      const f = document.getElementById('onb-profile-form');
      const filled = ['description', 'pronouns', 'link0']
        .some(n => f.elements[n] && f.elements[n].value.trim() !== '');
      document.getElementById('onb-next').className =
        (filled ? 'btn-create-flat' : 'btn-flat') + ' w-fit flex items-center gap-2 text-sm';
    }
    onbProfileChanged();

    function onbPreviewAvatar(input) {
      const file = input.files && input.files[0];
      if (file) {
        const img = document.getElementById('onb-avatar');
        img.src = URL.createObjectURL(file);
        img.classList.remove('hidden');
        document.getElementById('onb-avatar-placeholder').classList.add('hidden');
      }
      input.form.requestSubmit();
    }
  </script>
{{ end }}