{% 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>

<!-- Runtime Services -->
<div class="card bg-base-200 border border-base-content/10 mb-6">
  <div class="card-body p-5">
    <h2 class="card-title text-sm font-semibold">Runtime Services</h2>
    <p class="text-xs text-base-content/40 -mt-1">Toggle optional services without restarting the daemon.</p>
    <div class="flex flex-wrap gap-3 mt-3">
      {% if mcp_active is defined %}
      <div class="flex items-center gap-2 bg-base-300 rounded-lg px-3 py-2">
        <span class="text-xs font-mono font-semibold">MCP</span>
        <span id="mcp-badge" class="{% if mcp_active %}badge badge-success badge-sm{% else %}badge badge-error badge-sm{% endif %}">
          {% if mcp_active %}enabled{% else %}disabled{% endif %}
        </span>
        <button
          class="btn btn-xs btn-ghost ml-1"
          hx-post="/ui/manage/services/mcp/toggle"
          hx-target="#mcp-badge"
          hx-swap="outerHTML"
          title="Toggle MCP">
          <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </button>
      </div>
      {% endif %}
      {% if graphql_active is defined %}
      <div class="flex items-center gap-2 bg-base-300 rounded-lg px-3 py-2">
        <span class="text-xs font-mono font-semibold">GraphQL</span>
        <span id="graphql-badge" class="{% if graphql_active %}badge badge-success badge-sm{% else %}badge badge-error badge-sm{% endif %}">
          {% if graphql_active %}enabled{% else %}disabled{% endif %}
        </span>
        <button
          class="btn btn-xs btn-ghost ml-1"
          hx-post="/ui/manage/services/graphql/toggle"
          hx-target="#graphql-badge"
          hx-swap="outerHTML"
          title="Toggle GraphQL">
          <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </button>
      </div>
      {% endif %}
    </div>
  </div>
</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 %}