{% extends "base.html" %}

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

{% block content %}
<div class="flex items-center justify-between mb-6">
    <p class="text-sm text-gray-500">Total: {{ mapel_list|length }} mata pelajaran</p>
    <a href="{{ url_for('admin.mapel_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 Mapel
    </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">Deskripsi</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 mapel in mapel_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-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                            </div>
                            <span class="text-sm font-medium text-gray-800">{{ mapel.name }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">{{ mapel.description or '-' }}</td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ url_for('admin.mapel_edit', id=mapel.id) }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">Edit</a>
                            <form method="POST" action="{{ url_for('admin.mapel_delete', id=mapel.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 mapel_list %}
                <tr><td colspan="3" class="px-6 py-8 text-center text-gray-400 text-sm">Belum ada mata pelajaran</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}