{% extends "base.html" %}
{% block title %}Cards Difíceis — open-cognition{% endblock %}
{% block content %}
<div class="mb-6">
    <a href="/" class="text-sm text-gray-400 hover:text-gray-600">&larr; Dashboard</a>
    <h1 class="text-2xl font-bold mt-2">Cards Difíceis</h1>
    <p class="text-gray-500">Cards com menor qualidade média nas revisões</p>
</div>

{% if cards %}
<div class="space-y-3">
    {% for card in cards %}
    <div class="bg-white rounded-lg border border-gray-200 p-4">
        <div class="flex justify-between items-start">
            <div class="flex-1">
                <p class="font-medium text-sm">{{ card.front }}</p>
                <p class="text-sm text-gray-500 mt-1">{{ card.back }}</p>
                <div class="flex gap-3 mt-2 text-xs text-gray-400">
                    {% if card.topic_name %}
                    <span class="text-indigo-500">{{ card.topic_name }}</span>
                    {% endif %}
                    <span>{{ card.total_reviews }} revisões</span>
                    <span class="text-red-500">{{ card.errors }} erros</span>
                    <span>média: {{ card.avg_quality }}</span>
                    <button onclick="copyId('flashcard:{{ card.flashcard_id }}', this)" class="text-gray-300 hover:text-gray-500 font-mono cursor-pointer transition" title="Copiar ID">flashcard:{{ card.flashcard_id[:8] }}...</button>
                </div>
            </div>
            <div class="ml-4 flex-shrink-0">
                {% set error_pct = (card.errors / card.total_reviews * 100) | int if card.total_reviews > 0 else 0 %}
                <span class="inline-block px-2 py-1 rounded text-xs font-medium
                    {% if error_pct > 50 %}bg-red-100 text-red-700
                    {% elif error_pct > 25 %}bg-orange-100 text-orange-700
                    {% else %}bg-yellow-100 text-yellow-700{% endif %}">
                    {{ error_pct }}% erro
                </span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<p class="text-gray-400">Nenhum card com histórico de revisão suficiente ainda.</p>
{% endif %}
{% endblock %}