{% extends "base.html" %}
{% block title %}首页 - 满意错题本{% endblock %}
{% block page_title %}首页{% endblock %}

{% block content %}
<!-- Stats -->
<div class="grid grid-cols-4 gap-5 mb-8">
  <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-gray-400 text-xs mb-1">科目总数</p>
        <p class="text-3xl font-bold text-gray-800">{{ subjects|length }}</p>
      </div>
      <div class="w-11 h-11 rounded-xl bg-indigo-50 flex items-center justify-center text-primary text-lg">
        <i class="fa-solid fa-folder-open"></i>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-gray-400 text-xs mb-1">今日错题</p>
        <p class="text-3xl font-bold text-gray-800">{{ today_images.values() | map(attribute='__len__') | sum }}</p>
      </div>
      <div class="w-11 h-11 rounded-xl bg-pink-50 flex items-center justify-center text-accent text-lg">
        <i class="fa-solid fa-image"></i>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-gray-400 text-xs mb-1">累计记录</p>
        <p class="text-3xl font-bold text-gray-800">{{ subjects | map(attribute='error_images') | map('length') | sum }}</p>
      </div>
      <div class="w-11 h-11 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-500 text-lg">
        <i class="fa-solid fa-images"></i>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-gray-400 text-xs mb-1">知识评价</p>
        <p class="text-3xl font-bold text-gray-800">{{ evaluations|length }}</p>
      </div>
      <div class="w-11 h-11 rounded-xl bg-amber-50 flex items-center justify-center text-amber-500 text-lg">
        <i class="fa-solid fa-clipboard-list"></i>
      </div>
    </div>
  </div>
</div>

<!-- 今日错题 -->
<div class="mb-8">
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center gap-3">
      <h3 class="text-sm font-semibold text-gray-700">今日错题</h3>
      <span class="text-xs text-gray-400 bg-gray-100 px-2.5 py-1 rounded-full">{{ today }}</span>
    </div>
    <a href="/timeline?date={{ today }}" class="text-xs text-primary hover:underline">查看全部 <i class="fa-solid fa-arrow-right"></i></a>
  </div>
  {% if today_images %}
  <div class="grid grid-cols-3 gap-5">
    {% for subject_id, imgs in today_images.items() %}
      {% set subject = subjects | selectattr('id', 'equalto', subject_id) | first %}
      {% if subject %}
      <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-3.5 flex items-center gap-3 border-b border-gray-50">
          <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color:{{ subject.color }}"></span>
          <span class="font-semibold text-gray-700 text-sm">{{ subject.name }}</span>
          <span class="ml-auto text-xs text-gray-400">{{ imgs|length }}张</span>
        </div>
        <div class="p-4 grid grid-cols-2 gap-3">
          {% for img in imgs[:4] %}
          <div class="aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 group relative cursor-pointer" onclick="openLightbox('/static/uploads/{{ img.filename }}','{{ img.original_name }}',todayImg{{ subject_id }},{{ loop.index0 }})">
            <img src="/static/uploads/{{ img.filename }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
          </div>
          {% endfor %}
        </div>
        <div class="px-5 py-2.5 bg-gray-50 border-t border-gray-100">
          <a href="/subject/{{ subject_id }}?date={{ today }}" class="text-xs text-primary font-medium hover:underline flex items-center gap-1">
            <i class="fa-solid fa-eye"></i>查看��整记录
          </a>
        </div>
      </div>
      {% endif %}
    {% endfor %}
  </div>
  {% else %}
  <div class="bg-white rounded-2xl border border-gray-100 p-12 text-center">
    <div class="text-5xl text-gray-200 mb-4"><i class="fa-solid fa-camera"></i></div>
    <p class="text-gray-400 mb-4">今日暂无错题记录</p>
    <a href="/subjects" class="inline-flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">
      <i class="fa-solid fa-plus"></i>去添加错题
    </a>
  </div>
  {% endif %}
</div>

<!-- 快捷入口 -->
<div class="grid grid-cols-4 gap-5">
  <a href="/subjects" class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition group">
    <div class="w-11 h-11 rounded-xl bg-indigo-50 flex items-center justify-center text-primary text-lg mb-3 group-hover:scale-110 transition">
      <i class="fa-solid fa-folder-plus"></i>
    </div>
    <p class="font-semibold text-gray-700 text-sm">管理科目</p>
    <p class="text-xs text-gray-400 mt-1">创建、编辑各科目录</p>
  </a>
  <a href="/timeline" class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition group">
    <div class="w-11 h-11 rounded-xl bg-pink-50 flex items-center justify-center text-accent text-lg mb-3 group-hover:scale-110 transition">
      <i class="fa-solid fa-clock-rotate-left"></i>
    </div>
    <p class="font-semibold text-gray-700 text-sm">时间线浏览</p>
    <p class="text-xs text-gray-400 mt-1">按日期查看所有错题</p>
  </a>
  <a href="/review" class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition group">
    <div class="w-11 h-11 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-500 text-lg mb-3 group-hover:scale-110 transition">
      <i class="fa-solid fa-bookmark"></i>
    </div>
    <p class="font-semibold text-gray-700 text-sm">复习汇总</p>
    <p class="text-xs text-gray-400 mt-1">期中/期末一键汇总</p>
  </a>
  <a href="/evaluations" class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition group">
    <div class="w-11 h-11 rounded-xl bg-amber-50 flex items-center justify-center text-amber-500 text-lg mb-3 group-hover:scale-110 transition">
      <i class="fa-solid fa-chart-line"></i>
    </div>
    <p class="font-semibold text-gray-700 text-sm">知识评价</p>
    <p class="text-xs text-gray-400 mt-1">记录老师定期评价</p>
  </a>
</div>
{% endblock %}

{% block extra_js %}
<script>
{% for subject_id, imgs in today_images.items() %}
const todayImg{{ subject_id }} = [
  {% for img in imgs %}" /static/uploads/{{ img.filename }}",{% endfor %}
];
{% endfor %}
</script>
{% endblock %}