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

{% block content %}
<div style="padding: 24px;">
    <h2 style="margin-bottom: 20px; color: #1f2937; font-size: 20px; font-weight: 600;">Manajemen Akun User</h2>

    {% if messages %}
        {% for message in messages %}
            <div style="padding: 12px 16px; margin-bottom: 20px; border-radius: 6px; 
                        background-color: {% if message.tags == 'error' %}#fef2f2{% else %}#f0fdf4{% endif %}; 
                        color: {% if message.tags == 'error' %}#991b1b{% else %}#166534{% endif %};
                        border: 1px solid {% if message.tags == 'error' %}#fecaca{% else %}#bbf7d0{% endif %};">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <div style="background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #e5e7eb;">
        <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 14px;">
            <thead>
                <tr style="background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; color: #374151;">
                    <th style="padding: 12px 16px;">Username</th>
                    <th style="padding: 12px 16px;">Nama Lengkap</th>
                    <th style="padding: 12px 16px;">Email</th>
                    <th style="padding: 12px 16px;">Tipe Akun</th>
                    <th style="padding: 12px 16px;">Role Web</th>
                    <th style="padding: 12px 16px; text-align: center;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for u in users_list %}
                <tr style="border-bottom: 1px solid #f3f4f6;">
                    <td style="padding: 12px 16px; font-weight: 600; color: #111827;">{{ u.username }}</td>
                    <td style="padding: 12px 16px; color: #4b5563;">{{ u.get_full_name|default:"-" }}</td>
                    <td style="padding: 12px 16px; color: #4b5563;">{{ u.email|default:"-" }}</td>
                    <td style="padding: 12px 16px;">
                        {% if u.account_type == "LDAP" %}
                            <span style="background-color: #dbeafe; color: #1e40af; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600;">LDAP</span>
                        {% else %}
                            <span style="background-color: #f3f4f6; color: #374151; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600;">Lokal</span>
                        {% endif %}
                    </td>
                    <td style="padding: 12px 16px;">
                        {% if not u.is_active %}
                            <span style="background-color: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; border: 1px solid #fde68a;">Menunggu Persetujuan</span>
                        {% elif u.is_superuser or u.is_staff %}
                            <span style="color: #059669; font-weight: 600;">Administrator</span>
                        {% else %}
                            <span style="color: #6b7280;">User Biasa</span>
                        {% endif %}
                    </td>
                    <td style="padding: 12px 16px; text-align: center;">
                        {% if u != request.user %}
                            {% if not u.is_active %}
                                <!-- Form Aksi jika User Baru LDAP belum aktif (Belum di-accept) -->
                                <form action="{% url 'toggle_user_role' u.id %}" method="post" style="margin: 0; display: inline;">
                                    {% csrf_token %}
                                    <input type="hidden" name="role" value="accept">
                                    <button type="submit" style="background-color: #10b981; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;">
                                        Accept
                                    </button>
                                </form>
                            {% else %}
                                <!-- Form Aksi untuk merubah Role jika User sudah Aktif -->
                                <form action="{% url 'toggle_user_role' u.id %}" method="post" style="margin: 0; display: inline;">
                                    {% csrf_token %}
                                    {% if u.is_superuser or u.is_staff %}
                                        <input type="hidden" name="role" value="user">
                                        <button type="submit" style="background-color: #f3f4f6; color: #374151; border: 1px solid #d1d5db; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">
                                            Jadikan User Biasa
                                        </button>
                                    {% else %}
                                        <input type="hidden" name="role" value="admin">
                                        <button type="submit" style="background-color: #2563eb; color: white; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">
                                            Jadikan Admin
                                        </button>
                                    {% endif %}
                                </form>
                            {% endif %}
                        {% else %}
                            <span style="font-size: 12px; color: #9ca3af; font-style: italic;">(Akun Anda)</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}