{% extends "base.html" %}

{% block title %}Manage Projects — Ontoref{% endblock title %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
  <h1 class="text-xl font-bold">Manage Projects</h1>
  {% if registry_path %}
  <span class="text-xs font-mono text-base-content/40 truncate max-w-xs" title="{{ registry_path }}">{{ registry_path }}</span>
  {% endif %}
</div>

{% if error %}
<div class="alert alert-error mb-4 text-sm">
  <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
  </svg>
  <span>{{ error }}</span>
</div>
{% endif %}

<!-- Registered Projects -->
<div class="mb-6">
  <h2 class="text-sm font-semibold text-base-content/50 uppercase tracking-wider mb-3">Registered Projects</h2>
  {% if projects %}
  <div class="overflow-x-auto rounded-lg border border-base-content/10">
    <table class="table table-sm w-full">
      <thead>
        <tr class="text-xs text-base-content/40 uppercase tracking-wider">
          <th>Slug</th>
          <th>Root</th>
          <th>Auth</th>
          <th class="text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for p in projects %}
        <tr class="hover:bg-base-200/50">
          <td class="font-mono font-medium">
            <a href="/ui/{{ p.slug }}/" class="link link-hover text-primary">{{ p.slug }}</a>
          </td>
          <td class="font-mono text-xs text-base-content/60 max-w-xs truncate" title="{{ p.root }}">{{ p.root }}</td>
          <td>
            {% if p.auth %}
            <span class="badge badge-xs badge-warning">protected</span>
            {% else %}
            <span class="badge badge-xs badge-ghost">open</span>
            {% endif %}
          </td>
          <td class="text-right">
            <form method="post" action="/ui/manage/remove" class="inline"
                  onsubmit="return confirm('Remove project {{ p.slug }}?')">
              <input type="hidden" name="slug" value="{{ p.slug }}">
              <button type="submit" class="btn btn-xs btn-error btn-outline">Remove</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="text-center py-10 text-base-content/30 text-sm border border-base-content/10 rounded-lg">
    No projects registered. Add one below.
  </div>
  {% endif %}
</div>

<!-- Add Project Form -->
<div class="card bg-base-200 border border-base-content/10">
  <div class="card-body p-5">
    <h2 class="card-title text-sm font-semibold">Add Project</h2>
    <form method="post" action="/ui/manage/add" class="flex flex-col sm:flex-row gap-3 mt-2">
      <div class="form-control flex-1">
        <label class="label py-1">
          <span class="label-text text-xs text-base-content/60">Slug</span>
        </label>
        <input type="text" name="slug" required placeholder="my-project"
               class="input input-bordered input-sm font-mono"
               pattern="[a-z0-9][a-z0-9\-]*" title="Lowercase letters, digits, hyphens">
      </div>
      <div class="form-control flex-[3]">
        <label class="label py-1">
          <span class="label-text text-xs text-base-content/60">Absolute root path</span>
        </label>
        <input type="text" name="root" required placeholder="/path/to/project"
               class="input input-bordered input-sm font-mono">
      </div>
      <div class="flex items-end">
        <button type="submit" class="btn btn-sm btn-primary">Add</button>
      </div>
    </form>
  </div>
</div>
{% endblock content %}