{{ define "title" }}fork &middot; {{ .RepoInfo.FullName }}{{ end }}

{{ define "content" }}
<div class="p-6">
  <p class="text-xl font-bold dark:text-white">Fork {{ .RepoInfo.FullName }}</p>
</div>
<div class="p-6 bg-white dark:bg-gray-800 drop-shadow-sm rounded">
  <form hx-post="/{{ .RepoInfo.FullName }}/fork" class="space-y-12" hx-swap="none" hx-indicator="#spinner">

    <fieldset class="space-y-3">
      <legend for="repo_name" class="dark:text-white">Repository name</legend>
      <input type="text" id="repo_name" name="repo_name" value="{{ .RepoInfo.Name }}"
        class="w-full p-2 border rounded bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" />
    </fieldset>

    <fieldset class="space-y-3">
      <legend class="dark:text-white">Select a knot to fork into</legend>
      <div class="space-y-2">
        <div class="flex flex-col">
        {{ range .Knots }}
          <div class="flex items-center">
            <input
                type="radio"
                name="knot"
                value="{{ . }}"
                class="mr-2"
                id="domain-{{ . }}"
                {{if eq (len $.Knots) 1}}checked{{end}}                
                />
            <label for="domain-{{ . }}" class="dark:text-white">{{ . }}</label>
          </div>
        {{ else }}
        <p class="dark:text-white">No knots available.</p>
        {{ end }}
        </div>
      </div>
      <p class="text-sm text-gray-500 dark:text-gray-400">A knot hosts repository data. <a href="/settings/knots" class="underline">Learn how to register your own knot.</a></p>
    </fieldset>

    <div class="space-y-2">
      <button type="submit" class="btn-create flex items-center gap-2">
          {{ i "git-fork" "w-4 h-4" }}
          fork repo
          <span id="spinner" class="group">
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
          </span>
      </button>
      <div id="repo" class="error"></div>
    </div>
  </form>
</div>
{{ end }}
