{% extends "base.html" %}
{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Manajemen User</h1>
    <button onclick="document.getElementById('addAdminModal').classList.remove('hidden')" class="bg-minhaj-orange text-white px-4 py-2 rounded hover:bg-orange-700">
        <i class="fas fa-user-plus mr-2"></i>Tambah Admin
    </button>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden">
    <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">Username</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Linked Penulis</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 user in users %}
            <tr>
                <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ user.username }}</td>
                <td class="px-6 py-4 text-sm text-gray-500">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ 'bg-blue-100 text-blue-800' if user.role == 'admin' else 'bg-green-100 text-green-800' }}">
                        {{ user.role }}
                    </span>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ user.linked_id_penulis or '-' }}</td>
                <td class="px-6 py-4 text-right text-sm font-medium">
                    <form action="/reset-password/{{ user.id }}" method="POST" class="inline-block mr-2" onsubmit="return confirm('Reset password user ini?')">
                        <input type="hidden" name="new_password" value="123456"> <button type="submit" class="text-yellow-600 hover:text-yellow-900" title="Reset Pass ke '123456'"><i class="fas fa-key"></i></button>
                    </form>
                    {% if user.username != 'admin' %}
                    <form action="/delete-user/{{ user.id }}" method="POST" class="inline-block" onsubmit="return confirm('Hapus user ini?')">
                        <button type="submit" class="text-red-600 hover:text-red-900" title="Hapus"><i class="fas fa-trash"></i></button>
                    </form>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div id="addAdminModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <h3 class="text-lg font-bold text-gray-900 mb-4">Tambah Admin Baru</h3>
        <form action="/add-admin" method="POST">
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Username</label>
                <input type="text" name="username" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
                <input type="password" name="password" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
            </div>
            <div class="flex justify-end">
                <button type="button" onclick="document.getElementById('addAdminModal').classList.add('hidden')" class="bg-gray-300 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded mr-2">Batal</button>
                <button type="submit" class="bg-minhaj-orange hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">Simpan</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}