<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Users</title>
        <link href="{{base}}/css/styles.css" rel="stylesheet" />
        <link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
    </head>

    <body>
    {% include 'navBar.twig' %}
    {% if users is defined %}
    <div class="content">
        <section class="w-100">
            <table class="w-100">
                <tr class="d-flex flex-fill justify-content-around">
                    <td><a href="{{base}}/admin/{{userID}}/showAllUsers">
                        <input class="btn btn-info" type="button" value="Show all users"/>
                    </a></td>
                    <td><a href="{{base}}/admin/{{userID}}/showAllAdmins">
                        <input class="btn btn-info" type="button" value="Show all admins"/>
                    </a></td>
                    <td><a href="{{base}}/admin/{{userID}}/showAllTeachers">
                        <input class="btn btn-info" type="button" value="Show all teachers"/>
                    </a></td>
                    <td><a href="{{base}}/admin/{{userID}}/showAllStudents">
                        <input class="btn btn-info" type="button" value="Show all students"/>
                    </a></td>
                </tr>
            </table>
        </section>
        <section>
            {% include 'userContainer.twig' with {'users' : users, 'action' : 'removeUser'} %}
        </section>
    </div>
    {% endif %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

    <script src="{{base}}/js/scripts.js"></script>

    </body>
</html>