{% extends "base.html" %}
{% block title_suffix %} — Add repo{% endblock %}
{% block container_style %} style="max-width: 720px;"{% endblock %}
{% block content %}

  <p class="breadcrumb"><a href="/">← Library</a> / New entry</p>

  <section class="hero" style="border-bottom: 1px solid var(--border); padding-bottom: 1.75rem; margin-bottom: 1.75rem; display: block;">
    <div class="eyebrow"><span class="bar"></span>Acquisition</div>
    <h1>Add a <span class="ember">repo</span>.</h1>
    <p class="lede">Clone a remote into one of your workspaces and catalog it. Any git URL or <code>owner/repo</code> shorthand works.</p>
  </section>

  {% if error %}
  <article class="error-banner">
    <strong>Could not add repo</strong>
    <p>{{ error }}</p>
  </article>
  {% endif %}

  {% if not workspaces %}

  {% with lede="gitstow clones into a workspace, and none are configured — so there is nowhere to put this repo yet. Add one from the workspaces page, or from a terminal:", cta=True, cancel=True %}
  {% include "partials/no_workspaces.html" %}
  {% endwith %}

  {% else %}

  <form id="add-form" method="POST" action="/repos/add">

    <div class="form-row">
      <label for="url">Repository URL</label>
      <input type="text" id="url" name="url" value="{{ form.url if form else '' }}" placeholder="https://github.com/owner/repo.git" required>
      <span class="form-hint">Supports full git URLs (https / ssh) and <code>owner/repo</code> shorthand defaulting to GitHub.</span>
    </div>

    <div class="form-row">
      <label for="workspace">Workspace</label>
      <select id="workspace" name="workspace" required>
        <option value="" disabled{% if not form or not form.workspace %} selected{% endif %}>Choose where to clone…</option>
        {% for ws in workspaces %}
          <option value="{{ ws.label }}"{% if form and form.workspace == ws.label %} selected{% endif %}>{{ ws.label }} — {{ ws.path }} ({{ ws.layout }})</option>
        {% endfor %}
      </select>
      <span class="form-hint">Structured workspaces nest under <code>owner/</code>; flat workspaces skip the owner directory.</span>
    </div>

    <div class="form-row">
      <label for="tags">Tags <span style="color: var(--muted-soft); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.78rem; margin-left: 0.35rem;">optional</span></label>
      <input type="text" id="tags" name="tags" value="{{ form.tags if form else '' }}" placeholder="ai, rust, active">
      <span class="form-hint">Comma-separated. Workspace auto-tags are merged in automatically at clone time.</span>
    </div>

    <div style="display: flex; gap: 0.5rem; margin-top: 1.75rem;">
      <button type="submit" id="add-submit" class="btn btn-primary">Clone & catalog</button>
      <a href="/" class="btn btn-ghost">Cancel</a>
    </div>
  </form>

  {% endif %}

  <script>
    (function () {
      var form = document.getElementById('add-form');
      if (!form) return;
      form.addEventListener('submit', function () {
        var btn = document.getElementById('add-submit');
        if (btn) {
          btn.disabled = true;
          btn.dataset.pendingLabel = '1';
          btn.textContent = 'Cloning…';
          btn.classList.add('htmx-request');   /* reuse the existing spinner ::after */
        }
        var cancel = form.querySelector('a');
        if (cancel) cancel.style.pointerEvents = 'none';
      });
    })();
  </script>

{% endblock %}