{% extends "base.html" %}
{% block title %}时间线 - 满意错题本{% endblock %}
{% block page_title %}时间线{% endblock %}

{% block content %}
<!-- Date nav -->
<div class="bg-white rounded-2xl border border-gray-100 p-4 mb-6 flex items-center gap-3">
  {% if prev_date %}
  <a href="?date={{ prev_date }}" class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 hover:bg-gray-100 flex items-center justify-center text-gray-500 transition" title="前一天">
    <i class="fa-solid fa-chevron-left text-sm"></i>
  </a>
  {% else %}
  <span class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 flex items-center justify-center text-gray-200">
    <i class="fa-solid fa-chevron-left text-sm"></i>
  </span>
  {% endif %}

  <div class="flex items-center gap-2 overflow-x-auto flex-1 pb-1">
    {% for d in all_dates %}
    <a href="?date={{ d }}" class="date-chip flex-shrink-0 px-3 py-1.5 rounded-xl text-xs font-medium transition {% if d == current_date %}bg-primary text-white shadow-sm{% else %}bg-gray-50 text-gray-500 hover:bg-gray-100{% endif %}">
      {{ d }}
    </a>
    {% endfor %}
  </div>

  {% if next_date %}
  <a href="?date={{ next_date }}" class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 hover:bg-gray-100 flex items-center justify-center text-gray-500 transition" title="后一天">
    <i class="fa-solid fa-chevron-right text-sm"></i>
  </a>
  {% else %}
  <span class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 flex items-center justify-center text-gray-200">
    <i class="fa-solid fa-chevron-right text-sm"></i>
  </span>
  {% endif %}

  <input type="date" value="{{ current_date }}" onchange="location.href='/timeline?date='+this.value"
    class="border border-gray-200 rounded-xl px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-primary/30 text-gray-500 flex-shrink-0">
</div>

{% if timeline_data %}
<div class="space-y-5">
  {% for item in timeline_data %}
  <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-3 h-3 rounded-full flex-shrink-0" style="background-color:{{ item.subject.color }};box-shadow:0 0 0 3px {{ item.subject.color }}20"></span>
      <span class="font-bold text-gray-800 text-sm">{{ item.subject.name }}</span>
      <span class="text-xs text-gray-400 ml-auto">{{ item.images|length }} 张错题</span>
      <a href="/subject/{{ item.subject.id }}?date={{ current_date }}" class="text-xs text-primary hover:underline ml-2 flex items-center gap-1"><i class="fa-solid fa-arrow-right"></i>进入科目</a>
    </div>
    <div class="p-4 grid grid-cols-5 gap-3">
      {% for img in item.images %}
      <div class="group relative aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 cursor-pointer" onclick="openLightbox('/static/uploads/{{ img.filename }}','{{ img.original_name }}',lb{{ item.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 class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition"></div>
        <div class="absolute bottom-1.5 left-1.5 right-1.5">
          <p class="text-[10px] text-white/80 truncate px-1 py-0.5 bg-black/30 rounded">{{ img.original_name }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-2xl border border-gray-100 p-16 text-center">
  <div class="text-6xl text-gray-200 mb-4"><i class="fa-regular fa-calendar-xmark"></i></div>
  <p class="text-gray-400 mb-2">该日期暂无错题记录</p>
  <p class="text-sm text-gray-300">请选择其他日期或前往科目页上传错题</p>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
{% for item in timeline_data %}
const lb{{ item.subject.id }} = [
  {% for img in item.images %}" /static/uploads/{{ img.filename }}",{% endfor %}
];
{% endfor %}
</script>
{% endblock %}