<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Moderators</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
</head>
<body>
    {% include 'navbar_template.html' %}
    {% include 'flash_template.html' %}
    <h1>List of moderators</h1>
    <p>Er zijn momenteel {{ moderatorcount }} moderators in het systeem</p>
    <table style="width:100%">
        <tr>
            <th>Moderator ID</th>
            <th>Username</th>
            <th>Hashed Password</th>
            <th>May login</th>
            <th>Last seen</th>
        </tr>
        {% for row in moderators %}
        <tr>
            <th>{{ row[0] }}</th>
            <th>{{ row[1] }}</th>
            <th>{{ row[2] }}</th>
            <th>{{ row[3] }}</th>
            <th>{{ row[4] }}</th>
            <th>
                <form method="POST" action="/moderators/removemoderator">
                    <button type="submit" name="delete" value="{{ row[0] }}">Delete</button>
                </form>
            </th>
        </tr>
        {% endfor %}
    </table>

    <form>
        <label for="maxitems">Max items in table:</label>
        <select name="maxitems" id="maxitems">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        <label for="pagenum">Table page:</label>
        <select name="pagenum" id="pagenum">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <button type="submit">Refresh table</button>
    </form>

    <h3>Add new moderator</h3>
    <form method="POST" action="/moderators/addmoderator">
        <input type="text" placeholder="Username" name="uname" required>
        <input type="password" placeholder="Password" name="pword" required>
        <input type="password" placeholder="Password again" name="pword2" required>
        <button type="submit">Login</button>
    </form>

</body>
</html>