{% extends "base.html" %}
{% block title %}{% if editing_mirror %}Edit Mirror{% else %}Add Git Mirror{% endif %} — {{ project.name }} — Fossilrepo{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="max-w-3xl">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-lg font-semibold text-gray-200">{% if editing_mirror %}Edit Git Mirror{% else %}Add Git Mirror{% endif %}</h2>
    <a href="{% url 'fossil:sync' slug=project.slug %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Sync</a>
  </div>

  {# ── OAuth quick-connect (only shown when adding) ──────────────── #}
  {% if not editing_mirror %}
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-5 mb-6">
    <h3 class="text-sm font-semibold text-gray-200 mb-3 text-center">Quick Connect</h3>
    <div class="flex items-center justify-center gap-3">
      <a href="{% url 'fossil:oauth_github' slug=project.slug %}"
         class="inline-flex items-center gap-2 rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-gray-200 ring-1 ring-inset ring-gray-600 hover:bg-gray-700">
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
        Connect GitHub
      </a>
      <a href="{% url 'fossil:oauth_gitlab' slug=project.slug %}"
         class="inline-flex items-center gap-2 rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-gray-200 ring-1 ring-inset ring-gray-600 hover:bg-gray-700">
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"/></svg>
        Connect GitLab
      </a>
    </div>
    {% if request.session.github_oauth_token %}
    <p class="mt-2 text-xs text-green-400 text-center">GitHub connected as {{ request.session.github_oauth_user }}. Token will be used for new mirrors.</p>
    {% endif %}
    {% if request.session.gitlab_oauth_token %}
    <p class="mt-2 text-xs text-green-400 text-center">GitLab connected. Token will be used for new mirrors.</p>
    {% endif %}
  </div>
  {% endif %}

  {# ── Mirror form (add or edit) ─────────────────────────────────── #}
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
    <form method="post" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="action" value="{% if editing_mirror %}update{% else %}create{% endif %}">

      <div>
        <label class="block text-sm font-medium text-gray-300 mb-1">Git Remote URL <span class="text-red-400">*</span></label>
        <input type="text" name="git_remote_url" required
               value="{{ editing_mirror.git_remote_url|default:'' }}"
               placeholder="https://github.com/org/repo.git"
               class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-3 py-2 font-mono">
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-1">Sync Direction</label>
          <select name="sync_direction" class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm">
            {% for value, label in sync_direction_choices %}
            <option value="{{ value }}" {% if editing_mirror and editing_mirror.sync_direction == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-1">Auth Method</label>
          <select name="auth_method" class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm">
            {% for value, label in auth_method_choices %}
            <option value="{{ value }}" {% if editing_mirror and editing_mirror.auth_method == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-300 mb-1">Token / Credential</label>
        <input type="password" name="auth_credential"
               placeholder="{% if editing_mirror %}Leave blank to keep current credential{% else %}ghp_xxxxxxxxxxxx{% endif %}"
               class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-3 py-2 font-mono">
        <p class="mt-1 text-xs text-gray-500">
          {% if editing_mirror %}Leave blank to keep the existing credential.{% else %}For token auth: GitHub Personal Access Token or GitLab Access Token.{% endif %}
        </p>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-1">Fossil Branch</label>
          <input type="text" name="fossil_branch"
                 value="{{ editing_mirror.fossil_branch|default:'trunk' }}"
                 class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-3 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-1">Git Branch</label>
          <input type="text" name="git_branch"
                 value="{{ editing_mirror.git_branch|default:'main' }}"
                 class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-3 py-2">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-1">Sync Mode</label>
          <select name="sync_mode" class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm">
            {% for value, label in sync_mode_choices %}
            <option value="{{ value }}" {% if editing_mirror and editing_mirror.sync_mode == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-1">Schedule (cron)</label>
          <input type="text" name="sync_schedule"
                 value="{{ editing_mirror.sync_schedule|default:'*/15 * * * *' }}"
                 class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-3 py-2 font-mono">
          <p class="mt-1 text-xs text-gray-500">Default: every 15 minutes</p>
        </div>
      </div>

      {# Sync content options #}
      <div>
        <span class="block text-sm font-medium text-gray-300 mb-2">Sync Content</span>
        <div class="flex items-center gap-6">
          <label class="flex items-center gap-2 text-sm text-gray-300">
            <input type="checkbox" name="sync_tickets"
                   {% if editing_mirror and editing_mirror.sync_tickets %}checked{% endif %}
                   class="rounded border-gray-600 bg-gray-900 text-brand focus:ring-brand">
            Tickets as Issues
          </label>
          <label class="flex items-center gap-2 text-sm text-gray-300">
            <input type="checkbox" name="sync_wiki"
                   {% if editing_mirror and editing_mirror.sync_wiki %}checked{% endif %}
                   class="rounded border-gray-600 bg-gray-900 text-brand focus:ring-brand">
            Wiki pages
          </label>
        </div>
        <p class="mt-1 text-xs text-gray-500">Code is always synced. Optionally sync tickets and wiki.</p>
      </div>

      <div class="flex items-center justify-between pt-2">
        <a href="{% url 'fossil:sync' slug=project.slug %}" class="text-sm text-gray-400 hover:text-gray-200">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 editing_mirror %}Update Mirror{% else %}Add Mirror{% endif %}
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}