{% extends "nav.html.jinja" %}
{% block content %}
    <style>
        input[type="checkbox"].ignore-validation:valid,
        input[type="checkbox"].ignore-validation:invalid {
            border-color: var(--bs-border-color);
        }
    </style>
    <div class="container-fluid">
        <ul class="nav nav-underline nav-fill my-2">
            <li class="nav-item" role="presentation">
                <button class="nav-link active"
                        id="settings-users-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#settings-users-panel"
                        type="button"
                        role="tab">Users</button>
            </li>
        </ul>
        <div class="tab-content mb-2">
            <div class="tab-pane fade show active"
                 id="settings-users-panel"
                 role="tabpanel">
                <table id="users-table" class="table table-hover">
                </table>
            </div>
        </div>
    </div>
    {% if compare_permissions(["settings.write"], request.user.permissions) %}
        <div class="modal modal-lg fade" id="create-user-modal">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create User</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <form id="create-user-form" class="needs-validation" novalidate>
                        <div class="modal-body">
                            <div class="input-group mb-3 has-validation">
                                <span class="input-group-text">Username</span>
                                <input class="form-control" type="text" id="create-user-username" required />
                                <div class="invalid-feedback">Username missing.</div>
                            </div>
                            <div class="input-group mb-3 has-validation">
                                <span class="input-group-text">Password</span>
                                <input class="form-control" type="text" id="create-user-password" required />
                                <div class="invalid-feedback">Password missing.</div>
                            </div>
                            <div class="input-group mb-3 has-validation">
                                <input type="checkbox"
                                       id="create-user-permissions-validator"
                                       required
                                       style="display:none">
                                <div class="col" id="create-user-permissions"></div>
                                <div class="invalid-feedback">Please set at least one permission.</div>
                            </div>
                            <input class="btn btn-outline-light w-100"
                                   id="create-user-submit"
                                   type="submit"
                                   value="Create User" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% else %}
        <div class="modal modal-lg fade" id="upload-modal">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        Unavailable
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning m-0" role="alert">You do not have permission to add users.</div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <script src="{{ url_for('static', path='js/settings.js') }}"></script>
{% endblock content %}
