{% extends 'base.html' %}

{% block content %}
<div class="text-center m-2">
    <h1 class="display-1">Users</h1>
</div>
<div class="text-center border-bottom pb-4 mb-1">
    <a class="btn btn-primary"
        href="{{ url_for('usermanager.user_create') }}"
        role="button"
    ><i class="bi-person-plus"></i> Create a new user</a>
</div>
{% if users %}
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Picture</th>
                <th scope="col">Username</th>
                <th scope="col">Last Name</th>
                <th scope="col">First Name</th>
                <th scope="col">Email address</th>
                <th scope="col">Nickname</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users | sort %}
            <tr class="clickable" onclick="window.location='{{ url_for('usermanager.user_view', username=user.username) }}'" style="cursor: pointer">
                <th scope="row">
                    <img src="{{ user.get_thumbnail_url() }}"
                         alt="profile picture for user {{ user.username }}"
                         class="img-fluid rounded"
                         style="max-width: 100px"
                    >
                </th>
                <td class="align-middle">
                    <a class="text-decoration-none fw-bold" href="{{ url_for('usermanager.user_view', username=user.username) }}">{{ user.username }}</a>
                </td>
                <td class="align-middle">{{ user.last_name }}</td>
                <td class="align-middle">{{ user.first_name }}</td>
                <td class="align-middle">{{ user.email }}</td>
                <td class="align-middle">{{ user.display_name }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center">
    <p class="text-muted">There are currently no users.</p>
</div>
{% endif %}
{% endblock content %}
