{{ define "account/migrate/fragments/repoList" }}
{{ if not .Repos }}
  <p class="text-gray-500 dark:text-gray-400 mb-4">No importable repositories found.</p>
{{ else }}
  <form action="/account/migrate/start" method="post" class="flex flex-col gap-3">
    <input type="hidden" name="count" value="{{ len .Repos }}" />

    <div class="w-full border border-gray-200 dark:border-gray-700 rounded rouded-sm divide-y divide-gray-200 dark:divide-gray-700">
      {{ range $i, $repo := .Repos }}
        <details class="group">
          <summary class="p-2 pl-3 flex items-center justify-between gap-2 cursor-pointer">
            <div class="flex gap-2 min-w-0">
              <label class="text-base py-0 min-w-0 flex items-center gap-2">
                <input type="checkbox" id="selected_{{ $i }}" name="selected_{{ $i }}" value="1" {{ if $repo.Selected }}checked{{ end }} class="shrink-0" />
                <span class="min-w-0 truncate">{{ $repo.Name }}</span>
              </label>
            </div>

            <div class="flex items-center gap-2 shrink-0">
              <!--
              <span class="hidden sm:block text-gray-600 dark:text-gray-400">
                Updated 2 days ago
              </span>
              -->
              <div class="p-1">
                {{ i "chevron-right" "size-4 group-open:hidden" }}
                {{ i "chevron-down" "size-4 hidden group-open:block" }}
              </div>
            </div>
          </summary>
          <div class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 pt-2 pb-4 px-3 flex flex-col gap-4">
            <input type="hidden" name="website_{{ $i }}" value="{{ $repo.Website }}" />
            <input type="hidden" name="topics_{{ $i }}" value="{{ join $repo.Topics "," }}" />

            <label class="text-base py-0 space-y-1.5">
              <span>Clone URL</span>
              <input type="text" name="clone_url_{{ $i }}" value="{{ $repo.CloneUrl }}" disabled class="w-full px-2 py-1" />
            </label>

            <label class="text-base py-0 space-y-1.5">
              <span>Name</span>
              <input type="text" name="name_{{ $i }}" value="{{ $repo.Name }}" required placeholder="repository-name" class="bg-white dark:bg-gray-900 w-full px-2 py-1" />
            </label>

            <label class="text-base py-0 space-y-1.5">
              <span>Description</span>
              <textarea
                name="description_{{ $i }}"
                placeholder="repository description"
                class="bg-white dark:bg-gray-900 w-full px-2 py-1"
              >{{ $repo.Description }}</textarea>
            </label>

            <fieldset class="space-y-1">
              <legend class="text-base">Select a knot to migrate into</legend>
              <div class="w-full space-y-2">
                {{ range $.Knots }}
                  <label class="py-0 block flex items-center gap-2">
                    <input type="radio" name="knot_{{ $i }}" value="{{ . }}" required {{if eq (len $.Knots) 1}}checked{{end}} />
                    <span class="lowercase py-0.5">{{ . }}</span>
                  </label>
                {{ else }}
                  <p class="dark:text-white">No knots available.</p>
                {{ end }}
              </div>
            </fieldset>
          </div>
        </details>
      {{ end }}
    </div>

    <div class="pt-3 flex justify-end">
      <button type="submit" class="btn-create flex items-center gap-2" {{ if (not .Repos) }}disabled{{ end }}>
        {{ i "import" "size-4" }}
        {{ if gt (len .Repos) 1 }}
          Migrate {{ len .Repos }} Repositories
        {{ else }}
          Migrate Repository
        {{ end }}
        <span id="spinner" class="group">
          {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        </span>
      </button>
    </div>
  </form>
{{ end }}
{{ end }}