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

{{ define "content" }}
<div class="grid grid-cols-12">
  <div class="col-span-full md:col-start-3 md:col-span-8 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. All
    repositories are publicly accessible.
    </p>
  </div>
  {{ template "newRepoPanel" . }}
</div>
{{ end }}

{{ define "newRepoPanel" }}
  <div class="col-span-full md:col-start-3 md:col-span-8 bg-white dark:bg-gray-800 drop-shadow-sm rounded p-6 md:px-10">
    {{ template "newRepoForm" . }}
  </div>
{{ end }}

{{ define "newRepoForm" }}
  <form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">
    {{ template "step-1" . }}
    {{ template "step-2" . }}

    <div class="mt-8 flex justify-end">
      <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>

  </form>
{{ end }}

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

    <!-- Content column -->
    <div class="flex-1 pb-12">
      <h2 class="text-lg font-semibold dark:text-white">General</h2>
      <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Basic repository information.</div>

      <div class="space-y-2">
        {{ template "name" . }}
        {{ template "description" . }}
      </div>
    </div>
  </div>
{{ end }}

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

    <div class="flex-1">
      <h2 class="text-lg font-semibold dark:text-white">Configuration</h2>
      <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Repository settings and hosting.</div>

      <div class="space-y-2">
        {{ template "defaultBranch" . }}
        {{ template "knot" . }}
      </div>
    </div>
  </div>
{{ end }}

{{ define "name" }}
  <!-- 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 w-full">
      <div class="shrink-0 hidden md: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.Did }}
      </div>
      <input
        type="text"
        id="name"
        name="name"
        required
        class="flex-1 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>
{{ end }}

{{ define "description" }}
  <!-- 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 w-full 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>
{{ end }}

{{ define "defaultBranch" }}
  <!-- 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 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>
{{ end }}

{{ define "knot" }}
  <!-- Knot Selection -->
  <div>
    <label class="block text-sm font-bold uppercase dark:text-white mb-1">
      Select a knot
    </label>
    <div class="w-full 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
            {{if eq (len $.Knots) 1}}checked{{end}}
          />
          <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="/settings/knots" class="underline">register your own knot</a>.
    </p>
  </div>
{{ end }}

{{ define "numberCircle" }}
  <div class="w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center text-sm font-medium mt-1">
    {{.}}
  </div>
{{ end }}