{% extends "base.html" %}
{% block title %}{{ title }} — Fossilrepo{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'projects:list' %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Projects</a>
</div>

<div class="mx-auto max-w-2xl">
  <h1 class="text-2xl font-bold text-gray-100 mb-6">{{ title }}</h1>

  <form method="post" class="space-y-6 rounded-lg bg-gray-800 p-6 shadow border border-gray-700">
    {% csrf_token %}

    {% for field in form %}
      {% if field.name == "repo_source" or field.name == "clone_url" %}
        {# Rendered manually below #}
      {% else %}
    <div>
      <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-300">
        {{ field.label }}{% if field.field.required %} <span class="text-red-400">*</span>{% endif %}
      </label>
      <div class="mt-1">{{ field }}</div>
      {% if field.errors %}
      <p class="mt-1 text-sm text-red-400">{{ field.errors.0 }}</p>
      {% endif %}
    </div>
      {% endif %}
    {% endfor %}

    {% if not project %}
    <!-- Repo Source (create only) -->
    <div class="mt-6 pt-6 border-t border-gray-700" x-data="{ source: '{{ form.repo_source.value|default:"empty" }}' }">
      <h3 class="text-sm font-medium text-gray-300 mb-3">Repository Source</h3>
      <div class="space-y-3">
        <label class="flex items-center gap-3 cursor-pointer">
          <input type="radio" name="repo_source" value="empty" x-model="source"
                 class="text-brand focus:ring-brand">
          <div>
            <span class="text-sm text-gray-200">Create empty repository</span>
            <p class="text-xs text-gray-500">Start fresh with a new .fossil file</p>
          </div>
        </label>
        <label class="flex items-center gap-3 cursor-pointer">
          <input type="radio" name="repo_source" value="fossil_url" x-model="source"
                 class="text-brand focus:ring-brand">
          <div>
            <span class="text-sm text-gray-200">Clone from Fossil URL</span>
            <p class="text-xs text-gray-500">Clone an existing Fossil repository</p>
          </div>
        </label>
      </div>

      <div x-show="source === 'fossil_url'" x-transition class="mt-4">
        <label class="block text-sm font-medium text-gray-300 mb-1">Clone URL</label>
        <input type="url" name="clone_url" placeholder="https://fossil-scm.org/home"
               value="{{ form.clone_url.value|default:'' }}"
               class="w-full rounded-md border-gray-600 bg-gray-900 text-gray-100 text-sm px-3 py-2 focus:border-brand focus:ring-brand">
        <p class="mt-1 text-xs text-gray-500">The Fossil repository URL (same as what you'd pass to <code>fossil clone</code>)</p>
        {% if form.clone_url.errors %}
        <p class="mt-1 text-sm text-red-400">{{ form.clone_url.errors.0 }}</p>
        {% endif %}
      </div>
    </div>
    {% endif %}

    <div class="flex justify-end gap-3 pt-4">
      <a href="{% url 'projects:list' %}"
         class="rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
        Cancel
      </a>
      <button type="submit"
              class="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
        {% if project %}Update{% else %}Create{% endif %}
      </button>
    </div>
  </form>
</div>
{% endblock %}