{{ define "title" }}Migrate repositories from GitHub{{ end }}

{{ define "content" }}
  <div class="mt-6 mb-4">
    <h1 class="font-medium">
      {{ i "import" "size-5 inline m-0.5" }}
      Migrate repositories
    </h1>
  </div>
  <div class="flex gap-3 p-3 my-4 rounded-md bg-yellow-50 dark:bg-yellow-900/50">
    <div class="flex items-center px-1 text-yellow-700 dark:text-yellow-400">
      {{ i "badge-info" "size-6" }}
    </div>
    <p>Migration covers your repos and commit history.<br>Issues and PRs aren't part of the import yet.</p>
  </div>
  <div class="bg-white dark:bg-gray-800 p-8 pb-0 rounded w-full mx-auto drop-shadow-sm dark:text-white">
    {{ if not .Knots }}
      <p class="text-gray-500 dark:text-gray-400">
        You aren't a member of any knot yet. Join or register a knot first.
      </p>
    {{ else }}
      <div id="migration-steps">
        {{ template "step-1" . }}
        {{ template "step-2" . }}
      </div>
    {{ end }}

  </div>
{{ end }}

{{ define "step-1" }}
  <div
    id="migration-step-1"
    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" 1 }}
    </div>

    <!-- Content column -->
    <form
      hx-post="/account/migrate/listGitHubRepos"
      hx-target="#migration-step-2"
      hx-swap="outerHTML"
      class="flex-1 min-w-0 pb-12 space-y-3"
    >
      <h2 class="text-lg font-semibold uppercase dark:text-white">Connect Your Account</h2>
      <div class="flex gap-3 w-full">
        <input
          id="username"
          type="text"
          name="username"
          required
          placeholder="github-username"
          class="flex-1 py-2"
        />
        <button type="submit" class="btn">
          Load repos
          {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        </button>
      </div>
      <div>
        <span id="listghrepos-error" class="error"></span>
      </div>
    </form>
  </div>
{{ end }}

{{ define "step-2" }}
  {{ template "account/migrate/fragments/step2" }}
{{ end }}