{% extends "base.html" %}
{% block title %}Editar {{ topic.name }} — open-cognition{% endblock %}
{% block content %}
<div class="mb-6">
    <a href="/topics/{{ topic.id }}" class="text-sm text-gray-400 hover:text-gray-600">&larr; {{ topic.name }}</a>
    <h1 class="text-2xl font-bold mt-2">Editar tópico</h1>
</div>

<div class="bg-white rounded-lg border border-gray-200 p-6 max-w-lg">
    <form method="post" action="/topics/{{ topic.id }}/edit">
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">Nome</label>
            <input type="text" name="name" value="{{ topic.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 class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
            <textarea name="description" rows="3"
                      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">{{ topic.description or '' }}</textarea>
        </div>
        <div class="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">
                Salvar
            </button>
            <a href="/topics/{{ topic.id }}" class="text-gray-500 px-4 py-2 rounded-lg text-sm hover:bg-gray-100 transition">
                Cancelar
            </a>
        </div>
    </form>
</div>

<div class="mt-8 max-w-lg">
    <details class="border border-red-200 rounded-lg p-4">
        <summary class="text-sm text-red-600 cursor-pointer font-medium">Zona perigosa</summary>
        <div class="mt-3">
            <p class="text-sm text-gray-500 mb-3">Apagar este tópico permanentemente. Flashcards, recursos e artefatos associados não serão apagados.</p>
            <form method="post" action="/topics/{{ topic.id }}/delete" data-name="{{ topic.name | e }}" onsubmit="return confirm('Tem certeza que quer apagar o tópico ' + this.dataset.name + '?')">
                <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-700 transition">
                    Apagar tópico
                </button>
            </form>
        </div>
    </details>
</div>
{% endblock %}