{% extends "base.html" %}

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

{% block content %}
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-3">
    <p class="text-sm text-gray-500">Total: {{ murid_list|length }} murid</p>
    <div class="flex items-center gap-2">
        <a href="{{ url_for('admin.murid_bulk') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
            Import Massal
        </a>
        <a href="{{ url_for('admin.murid_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 Murid
        </a>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Nama</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Email</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Kelas</th>
                    <th class="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for murid in murid_list %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <span class="text-blue-700 text-xs font-semibold">{{ murid.name[0]|upper }}</span>
                            </div>
                            <span class="text-sm font-medium text-gray-800">{{ murid.name }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ murid.email }}</td>
                    <td class="px-6 py-4 text-sm text-gray-600">
                        {% if murid.kelas_enrollments %}
                            {{ murid.kelas_enrollments[0].kelas.name }}
                        {% else %}
                            <span class="text-gray-400">-</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ url_for('admin.murid_edit', id=murid.id) }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">Edit</a>
                            <form method="POST" action="{{ url_for('admin.murid_delete', id=murid.id) }}" class="inline" onsubmit="return confirm('Yakin ingin menghapus murid 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>
                    </td>
                </tr>
                {% endfor %}
                {% if not murid_list %}
                <tr><td colspan="4" class="px-6 py-8 text-center text-gray-400 text-sm">Belum ada data murid</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}