{% extends 'base.html' %}


{% block content %}
<div class="container-fluid">
    <h2 class="mb-4 text-dark">👥 User Management</h2>

    <div class="card user-table-card">
        <div class="card-header d-flex justify-content-between align-items-center bg-gradient-custom">
            <h5 class="mb-0">👤 Manage Users</h5>
            <a href="{% url 'accounts:user_add' %}" class="btn btn-light btn-sm">➕ Add User</a>
        </div>

        <div class="table-responsive">
            <table class="table table-hover text-center table-bordered table-custom mb-0">
                <thead class="table-header-custom">
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Active</th>
                        <th>Staff</th>
                        <th>Superuser</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.id }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.email }}</td>
                        <td><span class="badge bg-{{ user.is_active|yesno:'success,danger' }}">{{ user.is_active|yesno:"Yes,No" }}</span></td>
                        <td><span class="badge bg-{{ user.is_staff|yesno:'success,danger' }}">{{ user.is_staff|yesno:"Yes,No" }}</span></td>
                        <td><span class="badge bg-{{ user.is_superuser|yesno:'success,danger' }}">{{ user.is_superuser|yesno:"Yes,No" }}</span></td>
                        <td>
                            {% if not user.is_superuser %}
                            <div class="d-grid gap-1 d-md-flex justify-content-md-center">
                                <a href="{% url 'accounts:user_edit' user.pk %}" class="btn btn-sm btn-outline-primary">✏️ Edit</a>
                                <a href="{% url 'accounts:user_delete' user.pk %}" class="btn btn-sm btn-outline-danger">🗑️ Delete</a>
                            </div>
                            {% else %}
                                <span class="text-muted">🔒 Protected</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7">No users found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // On mobile, close the sidebar automatically when this page loads
    document.addEventListener('DOMContentLoaded', function () {
        if (window.innerWidth <= 768) {
            closeSidebar();
        }
    });

    function closeSidebar() {
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('mainContent');
        const navbar = document.querySelector('.navbar-custom');

        sidebar.classList.remove('show-sidebar');
        mainContent.classList.remove('sidebar-open');
        navbar.classList.remove('sidebar-open');
    }
</script>
{% endblock %}