{% extends "base.html" %}
{% block title %}Dashboard — open-cognition{% endblock %}
{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold mb-2">Dashboard</h1>
    <p class="text-gray-500">{{ due_count }} card{{ "s" if due_count != 1 else "" }} pendente{{ "s" if due_count != 1 else "" }} de revisão</p>
</div>

<div class="mb-8 flex gap-3">
    {% if due_count > 0 %}
    <a href="/review" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition">
        Revisar todos ({{ due_count }})
    </a>
    {% endif %}
    {% if struggling_count > 0 %}
    <a href="/struggling" class="inline-block bg-red-50 text-red-700 border border-red-200 px-6 py-3 rounded-lg font-medium hover:bg-red-100 transition">
        Cards difíceis ({{ struggling_count }})
    </a>
    {% endif %}
</div>

<h2 class="text-lg font-semibold mb-4">Tópicos com cards pendentes</h2>
{% if topics_with_due %}
<div class="grid gap-4 sm:grid-cols-2">
    {% for item in topics_with_due %}
    <a href="/topics/{{ item.topic.id }}" class="block bg-white rounded-lg border border-gray-200 p-4 hover:border-indigo-300 transition">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="font-medium">{{ item.topic.name }}</h3>
                {% if item.topic.description %}
                <p class="text-sm text-gray-500 mt-1">{{ item.topic.description }}</p>
                {% endif %}
            </div>
            <span class="bg-indigo-100 text-indigo-700 text-xs font-medium px-2 py-1 rounded">
                {{ item.due_count }} due
            </span>
        </div>
    </a>
    {% endfor %}
</div>
{% else %}
<p class="text-gray-400">Nenhum card pendente. Bom trabalho!</p>
{% endif %}

<h2 class="text-lg font-semibold mb-4 mt-8">Todos os tópicos</h2>
<div class="grid gap-4 sm:grid-cols-2">
    {% for topic in all_topics %}
    <a href="/topics/{{ topic.id }}" class="block bg-white rounded-lg border border-gray-200 p-4 hover:border-indigo-300 transition">
        <h3 class="font-medium">{{ topic.name }}</h3>
        {% if topic.description %}
        <p class="text-sm text-gray-500 mt-1">{{ topic.description }}</p>
        {% endif %}
        {% if topic.subtopics %}
        <div class="mt-2 flex flex-wrap gap-1">
            {% for s in topic.subtopics %}
            <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{{ s.name }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </a>
    {% endfor %}
</div>
{% endblock %}