{{ define "user/fragments/editBio" }}
  <form
    hx-post="{{ if .Action }}{{ .Action }}{{ else }}/profile/bio{{ end }}"
    class="flex flex-col gap-4 my-2 max-w-full"
    hx-disabled-elt="#save-btn,#cancel-btn"
    hx-swap="none"
    hx-indicator="#spinner">
    <div class="flex flex-col gap-1">
      {{ $description := "" }}
      {{ if and .Profile .Profile.Description }}
        {{ $description = .Profile.Description }}
      {{ end }}
      <label class="m-0 p-0" for="description">Bio</label>
      <textarea 
        type="text" 
        class="p-2 w-full" 
        name="description" 
        rows="3"
        placeholder="Write a bio">{{ $description }}</textarea>
    </div>

    <div class="flex flex-col gap-1">
      <label class="m-0 p-0" for="pronouns">Pronouns</label>
      <div class="flex items-center gap-2 w-full">
        {{ $pronouns := "" }}
        {{ if and .Profile .Profile.Pronouns }}
          {{ $pronouns = .Profile.Pronouns }}
        {{ end }}
        <input
          type="text"
          class="py-1 px-1 w-full"
          name="pronouns"
          placeholder="they/them"
          value="{{ $pronouns }}"
        >
      </div>
    </div>

    {{ if gt (len .AlsoKnownAs) 1 }}
      <div class="flex flex-col gap-1">
        <label class="m-0 p-0" for="preferredHandle">Preferred handle</label>
        <div class="flex items-center gap-2 w-full">
          {{ $preferredHandle := "" }}
          {{ if and .Profile .Profile.PreferredHandle }}
            {{ $preferredHandle = .Profile.PreferredHandle }}
          {{ end }}
          <span class="flex-shrink-0">{{ i "at-sign" "size-4" }}</span>
          <select name="preferredHandle" class="py-1 px-1 w-full border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
            {{ range .AlsoKnownAs }}
              {{ $h := trimPrefix . "at://" }}
              <option value="{{ $h }}" {{ if eq $h $preferredHandle }}selected{{ end }}>{{ $h }}</option>
            {{ end }}
          </select>
        </div>
      </div>
    {{ end }}

    <div class="flex flex-col gap-1">
      <label class="m-0 p-0" for="location">Location</label>
      <div class="flex items-center gap-2 w-full">
        {{ $location := "" }}
        {{ if and .Profile .Profile.Location }}
          {{ $location = .Profile.Location }}
        {{ end }}
        <span class="flex-shrink-0">{{ i "map-pin" "size-4" }}</span>
        <input type="text" class="py-1 px-1 w-full" name="location" value="{{ $location }}">
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <label class="m-0 p-0">Social links</label>
      <div class="flex items-center gap-2 py-1">
        {{ $includeBsky := false }}
        {{ if and .Profile .Profile.IncludeBluesky }}
          {{ $includeBsky = true }}
        {{ end }}
        <input type="checkbox" id="includeBluesky" name="includeBluesky" value="on" {{if $includeBsky}}checked{{end}}>
        <label for="includeBluesky" class="my-0 py-0 normal-case font-normal">Link to Bluesky account</label>
      </div>

      {{ $profile := .Profile }}
      {{ range $idx, $s := (sequence 5) }}
        {{ $link := "" }}
        {{ if and $profile $profile.Links }}
          {{ if lt $idx (len $profile.Links) }}
            {{ $link = index $profile.Links $idx }}
          {{ end }}
        {{ end }}

        <div class="flex items-center gap-2 w-full">
          <span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
          <input type="text" class="py-1 px-1 w-full" name="link{{$idx}}" value="{{ $link }}" placeholder="Social link {{add $idx 1}}">
        </div>
      {{ end }}
    </div>

    <div class="flex flex-col gap-1">
      <label class="m-0 p-0">Vanity stats</label>
      {{ range $idx, $s := (sequence 2) }}
          {{ $stat := "" }}
          {{ if and $profile $profile.Stats }}
            {{ if lt $idx (len $profile.Stats) }}
              {{ $s := index $profile.Stats $idx }}
              {{ $stat = $s.Kind }}
            {{ end }}
          {{ end }}

          {{ block "stat" (list $idx $stat) }} {{ end }}
      {{ end }}
    </div>

    <div class="flex items-center gap-2 justify-between">
      <button id="save-btn" type="submit" class="btn p-1 w-full flex items-center gap-2 no-underline text-sm">
        {{ i "check" "size-4" }} Save
        <span id="spinner" class="group">
          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
        </span>
      </button>
      <a href="/{{.LoggedInUser.Did}}" class="w-full no-underline hover:no-underline">
        <button id="cancel-btn" type="button" class="btn p-1 w-full flex items-center gap-2 no-underline text-sm">
          {{ i "x" "size-4" }} Cancel
        </button>
      </a>
    </div>
  </form>
{{ end }}

{{ define "stat" }}
  {{ $id := index . 0 }}
  {{ $stat := index . 1 }}
  <select class="stat-group w-full p-1 border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700 text-sm" id="stat{{$id}}" name="stat{{$id}}">
    <option value="">Choose Stat</option>
    {{ $stats := assoc
      "merged-pull-request-count" "Merged PR Count" 
      "closed-pull-request-count" "Closed PR Count" 
      "open-pull-request-count" "Open PR Count" 
      "open-issue-count" "Open Issue Count" 
      "closed-issue-count" "Closed Issue Count" 
      "repository-count" "Repository Count" 
      "star-count" "Star Count"
    }}
    {{ range $s := $stats }}
    {{ $value := index $s 0 }}
    {{ $label := index $s 1 }}
      <option value="{{ $value }}"{{ if eq $stat $value }} selected{{ end }}>{{ $label }}</option>
    {{ end }}
  </select>
{{ end }}
