{% extends "base.html.jinja" %}

{% block content %}

<div class="content">
    <h2>User Management</h2>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul class="flashes">
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <form method="POST" action="/users">
        <label for="username">Old password:</label>
        <input type="text" id="old_password" name="old_password" required>
        <br>
        <label for="password">New Password:</label>
        <input type="password" id="new_password" name="new_password" required>
        <br>
        <button type="submit">Change Password</button>
    </form>
    {% if admin %}
        <div class="add-user">
            <h3>Add New User:</h3>
            <form method="POST" action="/users">
                <label for="new_username">Username:</label>
                <input type="text" id="new_username" name="new_username" required>
                <br>
                <label for="new_password">Password:</label>
                <input type="password" id="new_password" name="new_password" required>
                <br>
                <label for="is_admin">Admin Privileges:</label>
                <input type="checkbox" id="is_admin" name="is_admin">
                <br>
                <button type="submit">Add User</button>
            </form>
        </div>
        <div class="users-list">
            <h3>Existing Users:</h3>
            <table>
                <thead>
                    <tr class="table-header">
                        <th>User ID</th>
                        <th>Username</th>
                        <th>Admin status</th>
                        <th></th>
                    </tr>
                    <tr class="searchbar">
                        <td colspan="255">
                            <input type="text" id="userSearch" placeholder="Search by user name..." onkeyup="tableSearch('userSearch', 'userlist',1)">
                        </td>
                    </tr>
                </thead>
                <tbody id="userlist">
                    {% for tableuser in userlist %}
                        <tr>
                            <td> {{ tableuser[0] }} </td>
                            <td> {{ tableuser[1] }} </td>
                            <td> {{ tableuser[2] }} </td>
                            {% if (tableuser[0] == 1) or (tableuser[0] == userinfo.id) %}
                            <!-- TODO: delete self prevention still does not work -->
                            <td><div class="fake-button">Cannot Delete</div></td>
                            {% else %}
                            <td>
                                <form method="POST" action="/users">
                                    <button name="delete" value="{{ tableuser[0] }}", type="submit">Delete User</button>
                                </form>
                            </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
    {% else %}
    {% endif %}
    

{% endblock content %}