{% extends 'superadmin/base.html' %}

{% block title %}Semua Pengguna | Superadmin{% endblock %}
{% block page_title %}Pengurusan Pengguna{% endblock %}
{% block nav_pengguna %}active{% endblock %}

{% block content %}
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden animate-fade-up">
    <div class="px-6 py-5 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
        <div>
            <h3 class="font-black text-slate-800 text-sm flex items-center gap-2">
                <i class="fas fa-users-cog text-blue-500"></i> Senarai Pengguna Berdaftar
            </h3>
            <p class="text-[10px] text-slate-500 mt-1 uppercase tracking-widest">Urus peranan dan status akaun dalam sistem</p>
        </div>
        <div class="flex items-center gap-4">
            <div class="text-[11px] font-bold text-slate-500">
                Total: <span class="text-blue-600">{{ pengguna.count }} pengguna</span>
            </div>
            <a href="{% url 'superadmin:tambah_peserta' %}" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors shadow-sm flex items-center gap-2">
                <i class="fas fa-user-plus"></i> Tambah Peserta
            </a>
            <a href="{% url 'superadmin:tambah_penganjur' %}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors shadow-sm flex items-center gap-2">
                <i class="fas fa-plus"></i> Tambah Penganjur
            </a>
        </div>
    </div>

    <div class="p-0">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse whitespace-nowrap">
                <thead>
                    <tr class="text-slate-400 text-[10px] uppercase tracking-widest border-b border-slate-200 bg-slate-50">
                        <th class="py-4 px-6 font-bold w-12 text-center">#</th>
                        <th class="py-4 px-6 font-bold">Pengguna</th>
                        <th class="py-4 px-6 font-bold">E-mel</th>
                        <th class="py-4 px-6 font-bold text-center">Peranan</th>
                        <th class="py-4 px-6 font-bold text-center">Tarikh Daftar</th>
                        <th class="py-4 px-6 font-bold text-center">Status</th>
                        <th class="py-4 px-6 font-bold text-center">Tindakan</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-slate-100">
                    {% for p in pengguna %}
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="py-4 px-6 text-center font-bold text-slate-400 text-xs">{{ forloop.counter }}</td>
                        <td class="py-4 px-6">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-black text-xs">
                                    {{ p.username|slice:":1"|upper }}
                                </div>
                                <div>
                                    <div class="font-bold text-slate-800">{{ p.get_full_name|default:p.username }}</div>
                                    <div class="text-[10px] text-slate-500">{{ p.username }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-6 text-slate-600 text-xs">{{ p.email }}</td>
                        <td class="py-4 px-6 text-center">
                            {% if p.is_staff %}
                                <span class="bg-amber-100 text-amber-700 border border-amber-200 px-2.5 py-1 rounded text-[10px] font-black uppercase tracking-wider"><i class="fas fa-user-tie mr-1"></i> Penganjur</span>
                            {% else %}
                                <span class="bg-slate-100 text-slate-600 border border-slate-200 px-2.5 py-1 rounded text-[10px] font-black uppercase tracking-wider"><i class="fas fa-user mr-1"></i> Peserta</span>
                            {% endif %}
                        </td>
                        <td class="py-4 px-6 text-center text-slate-500 text-xs">{{ p.date_joined|date:"d M Y" }}</td>
                        <td class="py-4 px-6 text-center">
                            {% if p.is_active %}
                                <span class="text-emerald-500 font-bold text-[10px] uppercase tracking-widest"><i class="fas fa-circle text-[8px] mr-1"></i> Aktif</span>
                            {% else %}
                                <span class="text-rose-500 font-bold text-[10px] uppercase tracking-widest"><i class="fas fa-circle text-[8px] mr-1"></i> Tidak Aktif</span>
                            {% endif %}
                        </td>
                        <td class="py-4 px-6 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <form method="post" action="{% url 'superadmin:toggle_penganjur' uid=p.pk %}" class="inline" title="Tukar Peranan">
                                    {% csrf_token %}
                                    <button type="submit" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-indigo-600 hover:border-indigo-300 hover:bg-indigo-50 flex items-center justify-center transition-all shadow-sm">
                                        <i class="fas fa-exchange-alt text-xs"></i>
                                    </button>
                                </form>
                                <a href="{% url 'superadmin:edit_pengguna' uid=p.pk %}" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-amber-600 hover:border-amber-300 hover:bg-amber-50 flex items-center justify-center transition-all shadow-sm" title="Edit Pengguna">
                                    <i class="fas fa-user-edit text-xs"></i>
                                </a>
                                <form method="post" action="{% url 'superadmin:delete_pengguna' uid=p.pk %}" class="inline" onsubmit="return confirm('Anda pasti mahu memadam pengguna ini? Tindakan ini tidak boleh diundur.');">
                                    {% csrf_token %}
                                    <button type="submit" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-rose-600 hover:border-rose-300 hover:bg-rose-50 flex items-center justify-center transition-all shadow-sm" title="Padam Pengguna">
                                        <i class="fas fa-trash-alt text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="py-16 text-center">
                            <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-100 shadow-inner">
                                <i class="fas fa-users-slash text-3xl text-slate-300"></i>
                            </div>
                            <h4 class="font-bold text-slate-700 text-base mb-1">Tiada pengguna dijumpai</h4>
                            <p class="text-xs text-slate-500">Sistem tidak menemui senarai pengguna buat masa ini.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}