{% extends "base.html" %}
{% block content %}
<div class="max-w-5xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Buku Saya</h1>
    </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 Buku</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Peran</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 books %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4">
                        <div class="text-sm font-bold text-gray-900">{{ b.judul_buku }}</div>
                        <div class="text-xs text-gray-500">ISBN: {{ b.isbn }}</div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        <span class="px-2 py-1 rounded bg-blue-100 text-blue-800 text-xs">{{ b.tipe_penulis }}</span>
                    </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 }}%</td>
                    <td class="px-6 py-4 text-right">
                        <a href="/author/book-detail/{{ b.id_buku }}" class="text-minhaj-blue hover:text-blue-900 font-medium text-sm">
                            <i class="fas fa-eye mr-1"></i> Detail
                        </a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="px-6 py-4 text-center text-gray-500">Belum ada buku.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}