{% extends "base.html" %}

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

{% block content %}
<div class="flex items-center justify-between mb-6">
    <p class="text-sm text-gray-500">Total: {{ guru_list|length }} guru</p>
    <a href="{{ url_for('admin.guru_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 Guru
    </a>
</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">Status</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 guru in guru_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-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <span class="text-primary-700 text-xs font-semibold">{{ guru.name[0]|upper }}</span>
                            </div>
                            <span class="text-sm font-medium text-gray-800">{{ guru.name }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ guru.email }}</td>
                    <td class="px-6 py-4">
                        {% if guru.is_active %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Aktif</span>
                        {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Nonaktif</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.guru_edit', id=guru.id) }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">Edit</a>
                            <form method="POST" action="{{ url_for('admin.guru_toggle', id=guru.id) }}" class="inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-sm text-yellow-600 hover:text-yellow-700 font-medium">
                                    {{ 'Nonaktifkan' if guru.is_active else 'Aktifkan' }}
                                </button>
                            </form>
                            <form method="POST" action="{{ url_for('admin.guru_delete', id=guru.id) }}" class="inline" onsubmit="return confirm('Yakin ingin menghapus guru 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 guru_list %}
                <tr><td colspan="4" class="px-6 py-8 text-center text-gray-400 text-sm">Belum ada data guru</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}