{% extends "base.html" %}

{% block title %}Jadwal Pelajaran{% endblock %}
{% block page_title %}Jadwal Pelajaran{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <p class="text-sm text-gray-500">Total: {{ jadwal_list|length }} jadwal</p>
    <a href="{{ url_for('admin.jadwal_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 Jadwal
    </a>
</div>

{% set days = {'senin': 'Senin', 'selasa': 'Selasa', 'rabu': 'Rabu', 'kamis': 'Kamis', 'jumat': 'Jumat'} %}

<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">Hari</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Waktu</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Kelas</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Mata Pelajaran</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Guru</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 jadwal in jadwal_list %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">{{ days.get(jadwal.day, jadwal.day) }}</span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ jadwal.start_time.strftime('%H:%M') }} - {{ jadwal.end_time.strftime('%H:%M') }}</td>
                    <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ jadwal.kelas.name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ jadwal.mata_pelajaran.name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ jadwal.guru.name }}</td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ url_for('admin.jadwal_edit', id=jadwal.id) }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">Edit</a>
                            <form method="POST" action="{{ url_for('admin.jadwal_delete', id=jadwal.id) }}" class="inline" onsubmit="return confirm('Yakin ingin menghapus?')">
                                <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 jadwal_list %}
                <tr><td colspan="6" class="px-6 py-8 text-center text-gray-400 text-sm">Belum ada jadwal pelajaran</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}