{{ define "account/migrate/fragments/repoList" }}
{{ if not .Repos }}
  <p class="text-gray-500 dark:text-gray-400">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="flex items-center gap-2 pb-2 border-b border-gray-200 dark:border-gray-700">
      <button type="button"
              onclick="document.querySelectorAll('input[name^=selected_]').forEach(c => c.checked = true)"
              class="btn-flat">
        select all
      </button>
      <button type="button"
              onclick="document.querySelectorAll('input[name^=selected_]').forEach(c => c.checked = false)"
              class="btn-flat">
        clear
      </button>
    </div>

    {{ range $i, $repo := .Repos }}
      <details class="border border-gray-200 dark:border-gray-700 rounded">
        <summary class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 px-3 py-2 cursor-pointer list-none">
          <div class="flex items-center gap-3 flex-1 min-w-0">
            <input type="checkbox" name="selected_{{ $i }}" value="1" id="selected_{{ $i }}"
                   onclick="event.stopPropagation()"
                   {{ if $repo.Selected }}checked{{ end }} />
            <div class="flex-1 min-w-0">
              <div class="font-medium truncate">{{ $repo.Name }}</div>
              <div class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $repo.CloneUrl }}</div>
            </div>
          </div>
          <select name="knot_{{ $i }}"
                  onclick="event.stopPropagation()"
                  class="w-full sm:w-auto rounded border border-gray-300 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600">
            {{ range $.Knots }}
              <option value="{{ . }}">{{ . }}</option>
            {{ end }}
          </select>
          <span class="hidden sm:inline text-gray-400 text-xs select-none">edit</span>
        </summary>

        <div class="border-t border-gray-200 dark:border-gray-700 p-3 flex flex-col gap-2">
          <input type="hidden" name="clone_url_{{ $i }}" value="{{ $repo.CloneUrl }}" />
          <input type="hidden" name="website_{{ $i }}" value="{{ $repo.Website }}" />
          <input type="hidden" name="topics_{{ $i }}" value="{{ join $repo.Topics "," }}" />

          <label class="flex flex-col gap-1 text-sm">
            <span class="text-xs uppercase text-gray-500">Repository name</span>
            <input type="text" name="name_{{ $i }}" value="{{ $repo.Name }}" required
                   class="border border-gray-300 dark:border-gray-700 rounded px-2 py-1 bg-transparent" />
          </label>

          <label class="flex flex-col gap-1 text-sm">
            <span class="text-xs uppercase text-gray-500">Description</span>
            <input type="text" name="description_{{ $i }}" value="{{ $repo.Description }}" maxlength="140"
                   class="border border-gray-300 dark:border-gray-700 rounded px-2 py-1 bg-transparent" />
          </label>
        </div>
      </details>
    {{ end }}

    <div class="pt-3">
      <button type="submit" class="btn">Start migration</button>
    </div>
  </form>
{{ end }}
{{ end }}