{% extends "admin_base.html" %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Users</h2>
    <span class="admin-count">{{ pagination.total }} users</span>
</div>

<div class="admin-table-wrap">
    <table class="admin-table">
        <thead>
            <tr>
                <th>Username</th>
                <th>Email</th>
                <th>Role</th>
                <th>Posts</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for u in users %}
            <tr>
                <td>
                    <div class="admin-user-cell">
                        <img src="{{ avatar_url('multiavatar', u['username'], 24) }}" class="avatar-img" style="width: 24px; height: 24px; border-radius: 50%;" alt="">
                        <span>{{ u['username'] }}</span>
                    </div>
                </td>
                <td>{{ u['email'] }}</td>
                <td>
                    {% if u['uid'] != user['uid'] %}
                    <form method="POST" action="/admin/users/{{ u['uid'] }}/role" class="admin-inline-form">
                        <select name="role" data-auto-submit class="admin-select">
                            <option value="member" {% if u.get('role') == 'Member' %}selected{% endif %}>Member</option>
                            <option value="admin" {% if u.get('role') == 'Admin' %}selected{% endif %}>Admin</option>
                        </select>
                    </form>
                    {% else %}
                    <span class="admin-role-badge {{ u.get('role')|lower }}">{{ u.get('role', 'Member') }}</span>
                    {% endif %}
                </td>
                <td>{{ u.get('posts_count', 0) }}</td>
                <td>
                    {% if u.get('is_active', True) %}
                    <span class="admin-status active">Active</span>
                    {% else %}
                    <span class="admin-status disabled">Disabled</span>
                    {% endif %}
                </td>
                <td>
                    <div class="admin-actions">
                        {% if u['uid'] != user['uid'] %}
                        <form method="POST" action="/admin/users/{{ u['uid'] }}/toggle" class="admin-inline-form">
                            <button type="submit" class="admin-btn admin-btn-sm">
                                <span class="icon">{% if u.get('is_active', True) %}&#x26A1;{% else %}&#x1F512;{% endif %}</span>{% if u.get('is_active', True) %}Disable{% else %}Enable{% endif %}
                            </button>
                        </form>
                        <button type="button" class="admin-btn admin-btn-sm" data-toggle="pw-{{ u['uid'] }}"><span class="icon">&#x1F511;</span>Password</button>
                        <form id="pw-{{ u['uid'] }}" method="POST" action="/admin/users/{{ u['uid'] }}/password" class="admin-pw-form hidden">
                            <input type="password" name="password" placeholder="New password" minlength="6" class="admin-input-sm">
                            <button type="submit" class="admin-btn admin-btn-sm"><span class="icon">&#x1F4BE;</span>Set</button>
                        </form>
                        {% else %}
                        <span class="admin-text-muted">You</span>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% include "_pagination.html" %}
{% endblock %}
