{% extends "base.html" %}
{% block content %}
<div class="flex justify-between items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Master Buku</h1>
        <p class="text-gray-600">Katalog buku terbitan.</p>
    </div>
    <a href="/add-buku" class="bg-minhaj-blue text-white px-4 py-2 rounded hover:bg-blue-800"><i class="fas fa-plus mr-2"></i>Tambah</a>
</div>

<div class="bg-white shadow overflow-hidden rounded-lg">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Judul/ISBN</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Penulis</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Harga</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Royalti</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            {% for b in buku_list %}
            <tr>
                <td class="px-6 py-4">
                    <div class="text-sm font-medium text-gray-900">{{ b.judul_buku }}</div>
                    <div class="text-xs text-gray-500">{{ b.isbn }}</div>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ b.penulis.nama_penulis }}</td>
                <td class="px-6 py-4 text-sm text-gray-500">Rp {{ "{:,}".format(b.harga_jual) }}</td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ b.persentase_royalti }}% ({{ b.opsi_pajak }})</td>
                <td class="px-6 py-4 text-right text-sm font-medium">
                    <a href="/edit-buku/{{ b.id_buku }}" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
                    <form action="/delete-buku/{{ b.id_buku }}" method="POST" class="inline-block" onsubmit="return confirm('Hapus buku ini?')">
                        <button type="submit" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}