{% extends "base.html" %}
{% block title %}科目管理 - 满意错题本{% endblock %}
{% block page_title %}科目管理{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <div>
    <p class="text-xs text-gray-400">管理你的所有科目</p>
  </div>
  <button id="btnCreate" 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 shadow-sm">
    <i class="fa-solid fa-plus"></i>新建科目
  </button>
</div>

<!-- Subject list -->
{% if subjects %}
<div class="grid grid-cols-3 gap-5">
  {% for subject in subjects %}
  <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition group">
    <div class="flex items-start justify-between mb-4">
      <div class="flex items-center gap-3">
        <span class="w-4 h-4 rounded-full shadow-sm flex-shrink-0" style="background-color:{{ subject.color }};box-shadow:0 0 0 3px {{ subject.color }}20"></span>
        <h3 class="font-bold text-gray-800 text-base">{{ subject.name }}</h3>
      </div>
      <form method="POST" action="/subjects/{{ subject.id }}/delete" onsubmit="return confirm('确定删除「{{ subject.name }}」？将同时删除所有错题记录。')">
        <button type="submit" class="text-gray-300 hover:text-red-400 transition opacity-0 group-hover:opacity-100" title="删除科目">
          <i class="fa-solid fa-trash-can"></i>
        </button>
      </form>
    </div>
    <div class="flex items-center gap-4 text-xs text-gray-400 mb-5">
      <span><i class="fa-solid fa-image mr-1"></i>{{ subject.error_images|length }} 条记录</span>
      <span><i class="fa-solid fa-calendar mr-1"></i>{{ subject.created_at.strftime('%Y-%m-%d') }}</span>
    </div>
    <a href="/subject/{{ subject.id }}" class="block w-full text-center bg-gray-50 hover:bg-indigo-50 text-gray-600 hover:text-primary py-2.5 rounded-xl text-sm font-medium transition">
      <i class="fa-solid fa-arrow-right-to-bracket mr-1"></i>进入科目
    </a>
  </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-solid fa-folder-open"></i></div>
  <p class="text-gray-400 mb-6">还没有科目，先创建一个吧</p>
  <button id="btnCreateEmpty" class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">
    <i class="fa-solid fa-plus"></i>新建第一个科目
  </button>
</div>
{% endif %}

<!-- Create modal -->
<div id="createModal" class="fixed inset-0 z-50 hidden items-center justify-center modal-overlay bg-black/40">
  <div class="bg-white rounded-2xl w-full max-w-md mx-4 shadow-2xl max-h-[90vh] overflow-y-auto">
    <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between sticky top-0 bg-white z-10 rounded-t-2xl">
      <h3 class="font-bold text-gray-800">新建科目</h3>
      <button id="btnCloseModal" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-lg"></i></button>
    </div>
    <form method="POST" action="/subjects/create" class="p-6">
      <div class="mb-5">
        <label class="block text-sm font-medium text-gray-600 mb-2">科目名称</label>
        <input type="text" name="name" required placeholder="例如：数学、英语、物理..."
          class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition">
      </div>
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-600 mb-2">主题色</label>
        <div class="flex gap-2 flex-wrap">
          {% for c in colors %}
          <label class="cursor-pointer">
            <input type="radio" name="color" value="{{ c }}" {% if loop.first %}checked{% endif %} class="hidden peer" data-color="{{ c }}">
            <span class="w-8 h-8 rounded-full block peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-400 transition hover:scale-110 ring-transparent"
              style="background-color:{{ c }};"></span>
          </label>
          {% endfor %}
        </div>
      </div>
      <div class="flex gap-3">
        <button type="button" id="btnCancel" class="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-50 transition">取消</button>
        <button type="submit" class="flex-1 bg-primary text-white py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">创建</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function(){
  var modal = document.getElementById('createModal');
  function openModal(){ if(modal) modal.classList.remove('hidden'); }
  function closeModal(){ if(modal) modal.classList.add('hidden'); }
  var btns = document.querySelectorAll('#btnCreate, #btnCreateEmpty');
  var closeBtns = document.querySelectorAll('#btnCloseModal, #btnCancel');
  btns.forEach(function(b){ b.addEventListener('click', openModal); });
  closeBtns.forEach(function(b){ b.addEventListener('click', closeModal); });
  if(modal){
    modal.addEventListener('click', function(e){
      if(e.target === modal) closeModal();
    });
  }
  document.querySelectorAll('input[name="color"]').forEach(function(r){
    r.addEventListener('change', function(){
      document.querySelectorAll('input[name="color"]').forEach(function(el){
        el.nextElementSibling.classList.add('ring-transparent');
        el.nextElementSibling.classList.remove('ring-2','ring-offset-2','ring-gray-400');
      });
      this.nextElementSibling.classList.remove('ring-transparent');
      this.nextElementSibling.classList.add('ring-2','ring-offset-2','ring-gray-400');
    });
  });
})();
</script>
{% endblock %}