{% extends "base.html" %}
{% block title %}Settings — {{ 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-2xl space-y-6">

  <!-- Repository Info -->
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-5">
    <h2 class="text-lg font-semibold text-gray-200 mb-4">Repository Info</h2>
    <dl class="space-y-3">
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">Filename</dt>
        <dd class="text-sm text-gray-200 font-mono">{{ fossil_repo.filename }}</dd>
      </div>
      {% if repo_info.file_size %}
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">File size</dt>
        <dd class="text-sm text-gray-200">{{ repo_info.file_size|filesizeformat }}</dd>
      </div>
      {% endif %}
      {% if repo_info.project_code %}
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">Project code</dt>
        <dd class="text-sm text-gray-200 font-mono truncate max-w-xs">{{ repo_info.project_code }}</dd>
      </div>
      {% endif %}
      {% if repo_info.checkin_count is not None %}
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">Checkins</dt>
        <dd class="text-sm text-gray-200">{{ repo_info.checkin_count|default:"0" }}</dd>
      </div>
      {% endif %}
      {% if repo_info.ticket_count is not None %}
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">Tickets</dt>
        <dd class="text-sm text-gray-200">{{ repo_info.ticket_count|default:"0" }}</dd>
      </div>
      {% endif %}
      {% if repo_info.wiki_page_count is not None %}
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">Wiki pages</dt>
        <dd class="text-sm text-gray-200">{{ repo_info.wiki_page_count|default:"0" }}</dd>
      </div>
      {% endif %}
      {% if fossil_repo.last_sync_at %}
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">Last synced</dt>
        <dd class="text-sm text-gray-200">{{ fossil_repo.last_sync_at|timesince }} ago</dd>
      </div>
      {% endif %}
      {% if repo_info.file_path %}
      <div class="flex items-center justify-between">
        <dt class="text-sm text-gray-400">File path</dt>
        <dd class="text-sm text-gray-400 font-mono truncate max-w-xs" title="{{ repo_info.file_path }}">{{ repo_info.file_path }}</dd>
      </div>
      {% endif %}
      {% if not repo_info.exists_on_disk %}
      <div class="rounded-md bg-yellow-900/30 border border-yellow-800 px-3 py-2 mt-2">
        <p class="text-sm text-yellow-300">Repository file not found on disk.</p>
      </div>
      {% endif %}
    </dl>
  </div>

  <!-- Remote URL -->
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-5">
    <h2 class="text-lg font-semibold text-gray-200 mb-4">Remote</h2>
    <form method="post">
      {% csrf_token %}
      <input type="hidden" name="action" value="update_remote">
      <div>
        <label class="block text-sm font-medium text-gray-300 mb-1">Remote URL</label>
        <input type="url" name="remote_url"
               value="{{ fossil_repo.remote_url }}"
               placeholder="https://fossil-scm.org/home"
               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">Upstream Fossil server URL for sync operations</p>
      </div>
      <div class="mt-3">
        <button type="submit"
                class="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
          Save Remote
        </button>
      </div>
    </form>
  </div>

  <!-- Clone URLs -->
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-5">
    <h2 class="text-lg font-semibold text-gray-200 mb-4">Clone URLs</h2>
    <div class="space-y-3">
      <div>
        <label class="block text-xs font-medium text-gray-400 mb-1">HTTP</label>
        <div class="flex items-center gap-2">
          <input type="text" readonly
                 value="{{ request.scheme }}://{{ request.get_host }}/projects/{{ project.slug }}/fossil/xfer"
                 class="flex-1 rounded-md border-gray-700 bg-gray-900 text-gray-300 text-sm px-3 py-2 font-mono">
        </div>
      </div>
    </div>
    <p class="mt-3 text-xs text-gray-500">Use these URLs to clone this repository with <code>fossil clone</code>.</p>
  </div>

  <!-- Actions -->
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-5">
    <h2 class="text-lg font-semibold text-gray-200 mb-4">Actions</h2>
    <div class="flex flex-wrap items-center gap-3">
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="sync_metadata">
        <button type="submit"
                class="inline-flex items-center gap-2 rounded-md bg-gray-700 px-4 py-2 text-sm font-medium text-gray-200 ring-1 ring-inset ring-gray-600 hover:bg-gray-600"
                {% if not repo_info.exists_on_disk %}disabled{% endif %}>
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
          </svg>
          Sync Metadata
        </button>
      </form>
      {% if fossil_repo.remote_url %}
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="pull_remote">
        <button type="submit"
                class="inline-flex items-center gap-2 rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover"
                {% if not repo_info.exists_on_disk %}disabled{% endif %}>
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
          </svg>
          Pull from Remote
        </button>
      </form>
      {% endif %}
    </div>
  </div>

  <!-- API Tokens & Branch Protection -->
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-5">
    <h2 class="text-lg font-semibold text-gray-200 mb-4">Management</h2>
    <div class="space-y-3">
      <a href="{% url 'fossil:api_tokens' slug=project.slug %}"
         class="flex items-center justify-between rounded-md bg-gray-700/50 px-4 py-3 hover:bg-gray-700 transition-colors">
        <div>
          <p class="text-sm font-medium text-gray-200">API Tokens</p>
          <p class="text-xs text-gray-500">Manage tokens for CI/CD systems and automation.</p>
        </div>
        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
        </svg>
      </a>
      <a href="{% url 'fossil:branch_protections' slug=project.slug %}"
         class="flex items-center justify-between rounded-md bg-gray-700/50 px-4 py-3 hover:bg-gray-700 transition-colors">
        <div>
          <p class="text-sm font-medium text-gray-200">Branch Protection</p>
          <p class="text-xs text-gray-500">Protect branches from unreviewed changes.</p>
        </div>
        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
        </svg>
      </a>
      <a href="{% url 'fossil:webhooks' slug=project.slug %}"
         class="flex items-center justify-between rounded-md bg-gray-700/50 px-4 py-3 hover:bg-gray-700 transition-colors">
        <div>
          <p class="text-sm font-medium text-gray-200">Webhooks</p>
          <p class="text-xs text-gray-500">Configure outbound event notifications.</p>
        </div>
        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
        </svg>
      </a>
    </div>
  </div>

  <!-- Danger Zone -->
  <div class="rounded-lg border-2 border-red-900/50 p-5">
    <h2 class="text-lg font-semibold text-red-400 mb-2">Danger Zone</h2>
    <p class="text-sm text-gray-400 mb-4">Destructive operations that cannot be undone.</p>
    <div class="rounded-md bg-gray-800 border border-gray-700 px-4 py-3 flex items-center justify-between">
      <div>
        <p class="text-sm font-medium text-gray-200">Delete this repository</p>
        <p class="text-xs text-gray-500">Permanently removes the .fossil file and all associated data.</p>
      </div>
      <button disabled
              class="rounded-md bg-red-900/50 px-4 py-2 text-sm font-medium text-red-400 cursor-not-allowed opacity-50"
              title="Repository deletion is not yet available">
        Delete
      </button>
    </div>
  </div>

</div>
{% endblock %}