{% 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>
  <div class="flex items-center gap-2">
    {% if daemon_admin_enabled %}
    <a href="/ui/manage/logout" class="btn btn-xs btn-ghost gap-1 text-base-content/40 hover:text-error">
      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
      </svg>
      logout
    </a>
    {% endif %}
  </div>
</div>

<div id="manage-error" class="{% if error %}alert alert-error mb-4 text-sm{% endif %}">
  {% if error %}<span>{{ error }}</span>{% endif %}
</div>

<!-- Registered Projects -->
<div class="mb-6" id="manage-projects-section">
  {% include "partials/manage_projects_section.html" %}
</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>
    <p class="text-xs text-base-content/40 -mt-1">Slug and import paths are read from <code>.ontoref/project.ncl</code>. Change is persisted to <code>~/.config/ontoref/projects.ncl</code>.</p>
    <form hx-post="/ui/manage/add"
          hx-target="#manage-projects-section"
          hx-swap="innerHTML"
          hx-on::after-request="if(event.detail.successful)this.reset()"
          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">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 %}