{{ define "title" }}new repo{{ end }}

{{ define "content" }}
<div class="px-6 py-2 mb-4">
  <h1 class="text-xl font-bold dark:text-white mb-1">Create a new repository</h1>
  <p class="text-gray-600 dark:text-gray-400 mb-1">
    Repositories contain a project's files and version history.
  </p>
</div>

<div class="bg-white dark:bg-gray-800 drop-shadow-sm rounded">
  <form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">

    <div class="p-6">
      <!-- Step 1: General -->
      <div class="flex gap-4">
        <div class="flex flex-col items-center w-10 flex-shrink-0">
          <div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
            1
          </div>
          <div class="w-px bg-gray-300 dark:bg-gray-600 h-80 mt-1"></div>
        </div>
        <div class="flex-1">
          <div class="mb-6">
            <div class="text-lg font-semibold dark:text-white mb-1">General</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Basic repository information.</div>
          </div>

          <div class="space-y-2">
            <!-- Repository Name with Owner -->
            <div>
              <label class="block text-sm font-bold uppercase dark:text-white mb-1">
                Repository name
              </label>
              <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0">
                {{ if .LoggedInUser.Handle }}
                  <div class="flex items-center px-2 py-2 gap-1 text-sm text-gray-700 dark:text-gray-300 md:border md:border-r-0 md:border-gray-300 md:dark:border-gray-600 md:rounded-l md:bg-gray-50 md:dark:bg-gray-700">
                    {{ template "user/fragments/picHandle" .LoggedInUser.Handle }}
                    <span class="md:hidden pr-2 py-2 text-gray-500 dark:text-gray-400">/</span>
                  </div>
                  <span class="hidden md:inline pr-2 py-2 text-gray-500 dark:text-gray-400 border-t border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700">/</span>
                {{ end }}
                <input
                  type="text"
                  id="name"
                  name="name"
                  required
                  class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded md:rounded-r md:rounded-l-none px-3 py-2"
                  placeholder="repository-name"
                />
              </div>
              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
              </p>
            </div>

            <!-- Description -->
            <div>
              <label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
                Description
              </label>
              <input
                type="text"
                id="description"
                name="description"
                class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
                placeholder="A brief description of your project..."
              />
              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                Optional. A short description to help others understand what your project does.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Step 2: Configuration -->
      <div class="flex gap-4">
        <div class="flex flex-col items-center w-10 flex-shrink-0">
          <div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
            2
          </div>
        </div>
        <div class="flex-1">
          <div class="mb-6">
            <div class="text-lg font-semibold dark:text-white mb-1">Configuration</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Repository settings and hosting.</div>
          </div>

          <div class="space-y-2">
            <!-- Default Branch -->
            <div>
              <label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
                Default branch
              </label>
              <input
                type="text"
                id="branch"
                name="branch"
                value="main"
                required
                class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
              />
              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                The primary branch where development happens. Common choices are "main" or "master".
              </p>
            </div>

            <!-- Knot Selection -->
            <div>
              <label class="block text-sm font-bold uppercase dark:text-white mb-1">
                Select a knot
              </label>
              <div class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
                {{ range .Knots }}
                  <div class="flex items-center">
                    <input
                      type="radio"
                      name="domain"
                      value="{{ . }}"
                      class="mr-2"
                      id="domain-{{ . }}"
                      required
                    />
                    <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
                  </div>
                {{ else }}
                <p class="dark:text-white">no knots available.</p>
                {{ end }}
              </div>
              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                A knot hosts repository data and handles Git operations.
                You can also <a href="/knots" class="underline">register your own knot</a>.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Create Repository Button -->
    <div class="p-6 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center justify-between">
        <div class="text-sm text-gray-500 dark:text-gray-400">
            All repositories are publicly accessible.
        </div>
        <button type="submit" class="btn-create flex items-center gap-2">
          {{ i "book-plus" "w-4 h-4" }}
          create repo
          <span id="spinner" class="group">
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
          </span>
        </button>
      </div>
      <div id="repo" class="error mt-2"></div>
    </div>

  </form>
</div>
{{ end }}