{% extends "base.html" %}
{% block title %}知识评测{% endblock %}
{% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {% for bm in benchmarks %}
  <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-sm transition-shadow">
    <div class="flex items-start justify-between mb-3">
      <div>
        <span class="text-[11px] text-gray-400 font-mono">{{ bm.id }}</span>
        <h3 class="text-[14px] font-semibold text-gray-900">{{ bm.name }}</h3>
      </div>
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-blue-50 text-blue-600">
        {{ bm.category | replace('_', ' ') | title }}
      </span>
    </div>
    <p class="text-[12px] text-gray-500 mb-4 line-clamp-2">{{ bm.description }}</p>
    <div class="flex items-center justify-between">
      <div class="text-[11px] text-gray-400">
        {{ bm.question_count }} 题
        {% if bm.answered > 0 %}
        · 已答 {{ bm.answered }}/{{ bm.question_count }}
        · 正确率 {{ bm.accuracy }}%
        {% endif %}
      </div>
      <a href="/web/quiz/{{ bm.id }}"
         class="inline-flex items-center px-3 py-1.5 rounded-lg text-[12px] font-medium
                {% if bm.answered == bm.question_count %}bg-gray-100 text-gray-600{% else %}bg-gray-900 text-white hover:bg-gray-800{% endif %}">
        {% if bm.answered == bm.question_count %}查看结果{% elif bm.answered > 0 %}继续答题{% else %}开始答题{% endif %}
      </a>
    </div>
  </div>
  {% endfor %}
  {% if not benchmarks %}
  <div class="col-span-full text-center py-12 text-[13px] text-gray-400">暂无知识评测题目</div>
  {% endif %}
</div>
{% endblock %}