{% extends "layout.html" %}
{% block content %}
<section class="users-page" aria-labelledby="UsersHeading">
    <header class="page-heading">
        <div>
            <p class="eyebrow">Administration</p>
            <h1 id="UsersHeading">Users</h1>
        </div>
        <p class="heading-copy">Manage who can create cards.</p>
    </header>
    <div class="user-table-shell">
        <table class="user-table">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th><span class="visually-hidden">Actions</span></th>
                </tr>
            </thead>
            <tbody>
            {% for user in users %}
                <tr>
                    <td data-label="Username">
                        <strong>{{ user.username }}</strong>
                    </td>
                    <td data-label="Email">{{ user.email }}</td>
                    <td data-label="Role">
                        <span class="role-badge">{{ user.role }}</span>
                    </td>
                    <td class="user-action">
                    {% if user.can_promote %}
                        <form method="post" action="{{ user.promote_url }}">
                            <input type="hidden" name="csrf_token"
                                   value="{{ csrf_token }}">
                            <button class="table-action" type="submit">
                                Promote
                            </button>
                        </form>
                    {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endblock %}