{% extends 'base.html' %}
{% block title %}Kitaplar · Odak Planım{% endblock %}
{% block content %}
<section class="grid gap-7 xl:grid-cols-[.9fr_1.4fr]"><div><p class="text-sm font-bold uppercase tracking-[.18em] text-teal">Kaynak kütüphanesi</p><h1 class="display-font mt-2 text-4xl font-bold">Kitaplarını düzenle.</h1><p class="mt-3 max-w-md text-sm leading-6 text-slate-500">Her çalışma kaynağını bir kez ekle, görevlerini ona bağla.</p><form method="post" class="mt-7 rounded-2xl border border-white bg-white/85 p-6 shadow-card"><h2 class="font-bold">Yeni kitap</h2><div class="mt-5 space-y-4"><label class="block text-sm font-bold">Kitap adı<input name="name" required placeholder="Örn. 345 TYT Matematik" class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10"></label><div class="grid grid-cols-2 gap-3"><label class="block text-sm font-bold">Kategori<input name="category" required placeholder="Örn. Matematik" class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500"></label><label class="block text-sm font-bold">Sınıf<input name="grade" required placeholder="Örn. 12. sınıf" class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500"></label></div><label class="block text-sm font-bold">Sınav türü<select name="exam_type" class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500"><option>Yok</option><option>TYT</option><option>AYT</option></select></label><button class="w-full rounded-xl bg-teal px-4 py-3 text-sm font-bold text-white shadow-lg shadow-teal-600/15 transition hover:bg-teal-700"><i class="fa-solid fa-plus mr-2"></i> Kitabı ekle</button></div></form></div>
<div class="rounded-2xl border border-white bg-white/85 shadow-card"><div class="border-b border-slate-100 px-6 py-5"><h2 class="font-bold">Kütüphanem <span class="ml-1 text-sm font-medium text-slate-400">{{ books|length }} kitap</span></h2></div>{% if books %}<div class="divide-y divide-slate-100">{% for book in books %}<article class="flex items-center gap-4 p-5 sm:px-6"><span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-100 to-teal-100 text-teal"><i class="fa-solid fa-book"></i></span><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-2"><h3 class="truncate font-bold">{{ book.name }}</h3>{% if book.exam_type != 'Yok' %}<span class="rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-bold text-indigo-600">{{ book.exam_type }}</span>{% endif %}</div><p class="mt-1 text-xs text-slate-500">{{ book.category }} · {{ book.grade }} · {{ book.tasks|selectattr('is_completed', 'equalto', false)|list|length }} aktif iş</p></div><div class="flex items-center gap-2"><a href="{{ url_for('edit_book', book_id=book.id) }}" title="Kitabı düzenle" class="flex h-9 w-9 items-center justify-center rounded-lg text-slate-400 transition hover:bg-sky-50 hover:text-sky-600"><i class="fa-solid fa-pen"></i></a><form method="post" action="{{ url_for('delete_book', book_id=book.id) }}" onsubmit="return confirm('Bu kitap ve tüm bağlı kayıtları silinsin mi?')"><button title="Kitabı sil" class="flex h-9 w-9 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-500"><i class="fa-solid fa-trash"></i></button></form></div></article>{% endfor %}</div>{% else %}<div class="px-6 py-20 text-center text-sm text-slate-500"><i class="fa-solid fa-book-open text-3xl text-slate-300"></i><p class="mt-4 font-bold text-slate-600">Kütüphanen henüz boş.</p><p class="mt-1 text-xs">Soldaki formdan ilk kaynağını ekleyebilirsin.</p></div>{% endif %}</div></section>
{% endblock %}