{% extends "base.html" %}

{% block title %}Data Kelas{% endblock %}
{% block page_title %}Data Kelas{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <p class="text-sm text-gray-500">Total: {{ kelas_list|length }} kelas</p>
    <a href="{{ url_for('admin.kelas_add') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Tambah Kelas
    </a>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for kelas in kelas_list %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 card-islamic">
        <div class="flex items-start justify-between">
            <div>
                <h4 class="font-semibold text-gray-800">{{ kelas.name }}</h4>
                <p class="text-xs text-gray-500 mt-1">Tahun Ajaran: {{ kelas.academic_year }}</p>
                <p class="text-xs text-primary-600 mt-1">{{ kelas.murid.count() }} murid</p>
            </div>
            <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg>
            </div>
        </div>
        <div class="flex items-center gap-2 mt-4 pt-4 border-t border-gray-100">
            <a href="{{ url_for('admin.kelas_edit', id=kelas.id) }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">Edit</a>
            <span class="text-gray-300">|</span>
            <form method="POST" action="{{ url_for('admin.kelas_delete', id=kelas.id) }}" class="inline" onsubmit="return confirm('Yakin ingin menghapus kelas ini?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="text-sm text-red-600 hover:text-red-700 font-medium">Hapus</button>
            </form>
        </div>
    </div>
    {% endfor %}
    {% if not kelas_list %}
    <div class="col-span-full text-center py-12 text-gray-400 text-sm">Belum ada data kelas</div>
    {% endif %}
</div>
{% endblock %}