{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='register.css') }}">
<script src="{{ url_for('static', filename='register.js') }}" defer></script>
{% endblock %}

{% block content %}
<main>
    <form method="post">
        <table>
            <tr id="users">
                <th id="save-box"><button id="save-btn" type="submit" name="action" value="edit">SAVE CHANGES</button>
                </th>
                {% for udata in udatas %}
                <th>{{ udata["id"] }}</th>
                {% endfor %}
            </tr>
            {% set quads = ["ade", "bea", "cam", "des"] %}
            {% for quad in quads %}
            <tr id="qh-{{ quad }}" class="qheader">
                <td>
                    <h2>{{ quad }}</h2>
                </td>
                {% for udata in udatas %}
                <td class="pgrid" data-targ="quad/{{ quad }}/{{ udata['_id'] }}"
                    data-mark="{{ quad in udata['quad'] }}">
                    <input type="hidden">
                </td>
                {% endfor %}
            </tr>
            {% for ddata in ddatas %}
            {% if ddata["quad"] == quad %}
            <tr class="quad-{{ quad }}">
                <td>{{ ddata["name"] }} ({{ ddata["id"] }})</td>
                {% for udata in udatas %}
                <td class="pgrid" data-targ="perm/{{ ddata['id'] }}/{{ udata['_id'] }}" data-mark="{{ ddata['id'] in
                        udata['perm'] }}">
                    <input type="hidden">
                </td>
                {% endfor %}
            </tr>
            {% endif %}
            {% endfor %}
            {% endfor %}
        </table>
    </form>
    <hr>
    <form id="useradd" method="post">
        <div>
            <label for="username">Username:</label>
            <input id="username" name="username" autocomplete="username">
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" autocomplete="new-password">
        </div>
        <button type="submit" name="action" value="create">Create User</button>
    </form>
</main>
{% endblock %}