{{ define "account/migrate/fragments/step2" }}
{{- $isPreview := eq .Repos nil -}}
  <div
    id="migration-step-2"
    class="flex relative border-l border-gray-200 dark:border-gray-700 ml-3 pl-7"
  >
    <div class="absolute -left-3 -top-0">
      {{ template "account/migrate/fragments/stepIndicator" 2 }}
    </div>

    <!-- Content column -->
    <div class="flex-1 min-w-0 pb-12 space-y-3">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <h2 class="text-lg font-semibold uppercase">Choose &amp; Configure Repositories</h2>
        <div class="ml-auto h-7 flex items-center">
          <button
            class="btn-flat flex items-center gap-2"
            onclick="document.querySelectorAll('input[name^=selected_]').forEach(c => c.checked = !c.checked)"
            {{ if $isPreview }}disabled{{ end }}
          >
            {{ i "check-check" "size-4" }}
            Select all repositories
          </button>
        </div>
      </div>
      {{ if $isPreview }}
        <p class="text-gray-500 dark:text-gray-400 mb-4">No repositories yet, connect your account first.</p>
      {{ else if gt (len .Repos) 0 }}
        <form
          hx-post="/account/migrate/start"
          hx-target="none"
          hx-swap="none"
          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 }}
              {{ template "repo-row" (list $i $repo $) }}
            {{ end }}
          </div>

          <div class="pt-3 flex justify-between items-center">
            <span id="migrate-error" class="error"></span>
            <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>
      {{ else }}
        <p class="text-gray-500 dark:text-gray-400 mb-4">No importable repositories found.</p>
      {{ end }}
    </div>
  </div>
{{ end }}

{{ define "repo-row" }}
  {{- $i    := index . 0 }}
  {{- $repo := index . 1 }}
  {{- $root := index . 2 }}
  <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>
        {{ if gt $repo.Stars 0 }}
          <div class="flex items-center gap-1">
            {{ i "star" "size-3 fill-current" }}
            <span class="text-sm">{{ scaleFmt $repo.Stars }}</span>
          </div>
        {{ end }}
      </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 }}" readonly 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 $root.Knots }}
            <label class="py-0 block flex items-center gap-2">
              <input type="radio" name="knot_{{ $i }}" value="{{ . }}" required {{if eq (len $root.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 }}