{% extends "base.html" %}
{% block title %}Tópicos — open-cognition{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Tópicos</h1>
    <button onclick="document.getElementById('create-form').classList.toggle('hidden')"
            class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
        + Novo tópico
    </button>
</div>

<!-- Create form -->
<div id="create-form" class="hidden mb-6 bg-white rounded-lg border border-gray-200 p-4">
    <form hx-post="/topics/create" hx-target="#topics-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) { document.getElementById('create-form').classList.add('hidden'); this.reset(); }">
        <div class="grid gap-3 sm:grid-cols-2">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nome</label>
                <input type="text" name="name" required
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tópico pai (opcional)</label>
                <select name="parent_id" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                    <option value="">Nenhum (raiz)</option>
                    {% for topic in topics %}
                    <option value="{{ topic.id }}">{{ topic.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="mt-3">
            <label class="block text-sm font-medium text-gray-700 mb-1">Descrição (opcional)</label>
            <input type="text" name="description"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
        </div>
        <div class="mt-3 flex gap-2">
            <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
                Criar
            </button>
            <button type="button" onclick="document.getElementById('create-form').classList.add('hidden')"
                    class="text-gray-500 px-4 py-2 rounded-lg text-sm hover:bg-gray-100 transition">
                Cancelar
            </button>
        </div>
    </form>
</div>

<div id="topics-list">
{% for topic in topics %}
<div class="bg-white rounded-lg border border-gray-200 p-4 mb-3">
    <div class="flex justify-between items-start">
        <div>
            <div class="flex items-center gap-2">
                <a href="/topics/{{ topic.id }}" class="font-medium text-indigo-600 hover:underline">{{ topic.name }}</a>
                <button onclick="copyId('topic:{{ topic.id }}', this)" class="text-xs text-gray-300 hover:text-gray-500 font-mono cursor-pointer transition" title="Copiar ID">topic:{{ topic.id[:8] }}...</button>
            </div>
            {% if topic.description %}
            <p class="text-sm text-gray-500 mt-1">{{ topic.description }}</p>
            {% endif %}
        </div>
        <a href="/topics/{{ topic.id }}/edit" class="text-xs text-gray-400 hover:text-gray-600">editar</a>
    </div>
    {% if topic.subtopics %}
    <div class="ml-4 mt-2 border-l-2 border-gray-200 pl-3">
        {% for s in topic.subtopics %}
        <a href="/topics/{{ s.id }}" class="block text-sm text-gray-600 hover:text-indigo-600 py-0.5">{{ s.name }}</a>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endfor %}

{% if not topics %}
<p class="text-gray-400">Nenhum tópico criado ainda.</p>
{% endif %}
</div>
{% endblock %}