{% extends 'base.jinja' %}

{% block title %}Formula 10 - Users{% endblock title %}

{% set active_page = "/users" %}
{% set active_user = none %}

{% block body %}

    <div class="card shadow-sm">
        <div class="card-body">
            <h5 class="card-title">Add User</h5>

            <form action="/user-add" method="post">
                <div class="input-group">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="select-add-user" name="select-add-user"
                               placeholder="Username:">
                        <label for="select-add-user">Username:</label>
                    </div>

                    <input type="submit" class="form-control btn btn-danger" value="Add" style="max-width: 200px;">
                </div>
            </form>
        </div>
    </div>

    {% if model.all_users() | length > 0 %}
        <div class="card mt-2 shadow-sm">
            <div class="card-body">
                <h5 class="card-title">Registered Users</h5>

                <ul class="list-group list-group-flush">
                    {% for user in model.all_users() %}
                        <li class="list-group-item">{{ user.name }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="card mt-2 shadow-sm">
            <div class="card-body">
                <h5 class="card-title">Delete user</h5>

                <form action="/user-delete" method="post">
                    <div class="input-group">
                        <select class="form-control form-select" aria-label="select-delete-user"
                                name="select-delete-user">
                            <option selected="selected" disabled="disabled" hidden="hidden">Select User</option>
                            {% for user in model.all_users() %}
                                <option value="{{ user.name }}">{{ user.name }}</option>
                            {% endfor %}
                        </select>

                        <input type="submit" class="form-control btn btn-danger" value="Delete"
                               style="max-width: 200px;">
                    </div>

                    <div class="form-text">
                        "Deleting" a user just hides it from the user interface without deleting any inputs, your
                        "pERsoNaL
                        DaTa" belongs to ME now.<br>
                        Re-adding a user with the same name will "restore" it. That doesn't mean you're allowed to
                        remove everyone though.
                    </div>
                </form>
            </div>
        </div>
    {% endif %}

    <div class="card mt-2 border-danger shadow-sm">
        <div class="card-body">
            <h5 class="card-title">Functions that should not be public</h5>
            <h6 class="card-subtitle mb-2">(F you if you click this without knowing what it does)</h6>

            <a class="btn btn-outline-danger" href="/save/all">Save all data</a>
            <a class="btn btn-outline-danger" href="/load/all">Load all data</a>
            <a class="btn btn-outline-danger" href="/load/static">Load static data</a>
            <a class="btn btn-outline-danger" href="/load/dynamic">Load dynamic data</a>
        </div>
    </div>

{% endblock body %}