{{ 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">
    {{ template "step-1" . }}
    {{ template "step-2" . }}

    <span id="migrate-error" class="error"></span>

    {{ 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>
    {{ end }}

  </div>
{{ end }}

{{ define "step-1" }}
  <div class="flex relative border-l border-gray-200 dark:border-gray-700 ml-3 pl-7">
    <div class="absolute -left-3 -top-0">
      {{ template "numberCircle" 1 }}
    </div>

    <!-- Content column -->
    <form
      hx-post="/account/migrate/listGitHubRepos"
      hx-target="#source-repos"
      hx-swap="innerHTML"
      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>
    </form>
  </div>
{{ end }}

{{ define "step-2" }}
  <div class="flex relative border-l border-gray-200 dark:border-gray-700 ml-3 pl-7">
    <div class="absolute -left-3 -top-0">
      {{ template "numberCircle" 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)"
          >
            {{ i "check-check" "size-4" }}
            Select all repositories
          </button>
        </div>
      </div>
      <div id="source-repos">
        <!--
        <p class="text-gray-500 dark:text-gray-400 mb-4">No repositories yet, connect your account first</p>
        -->

        {{ template "account/migrate/fragments/repoList" . }}
      </div>
    </div>
  </div>
{{ end }}

{{ define "numberCircle" }}
  <div class="size-7 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center font-medium">
    {{.}}
  </div>
{{ end }}