{% 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 Penulis</h1>
        <p class="text-gray-600">Kelola data mitra penulis.</p>
    </div>
    <a href="/add-penulis" class="bg-minhaj-orange text-white px-4 py-2 rounded hover:bg-orange-700"><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">Nama</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Kontak</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Bank</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 p in penulis_list %}
            <tr>
                <td class="px-6 py-4">
                    <div class="text-sm font-medium text-gray-900">{{ p.nama_penulis }}</div>
                    <div class="text-xs text-gray-500">{{ p.email }}</div>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ p.no_hp }}</td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ p.bank }} - {{ p.no_rekening }}</td>
                <td class="px-6 py-4 text-right text-sm font-medium">
                    <a href="/edit-penulis/{{ p.id_penulis }}" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
                    <form action="/delete-penulis/{{ p.id_penulis }}" method="POST" class="inline-block" onsubmit="return confirm('Hapus penulis ini? User login juga akan terhapus.')">
                        <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 %}