{% extends "layout.html" %}
{% block body %}
{{ super() }}

<section id="home" class="home">
    <div class="container" style="text-align: center">
        <h1 class="logo" style="text-align: center">Admin Dashboard</h1>
        <p style="text-align: center" class="fst-italic">Manage users and roles</p>
    </div>
</section>

{# Display error message if any #}
{% if id_to_add_is_duplicated or id_to_add_is_invalid or id_to_change_password_not_exists %}
<div class="alert alert-dismissible alert-danger mt-3">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong>
    {% if id_to_add_is_duplicated %}
    The account name already exists.
    {% elif id_to_add_is_invalid %}
    The account name is invalid.
    {% endif %}
</div>
{% endif %}

<!-- Modal -->
<div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="user-modal-title">Modal title</h5>
            </div>
            <div class="modal-body" id="user-modal-content"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<section id="admin-section" class="base">
    <div class="container">
        <div class="row p-3">

            <div class="col-lg-6">
                <h3>Add Account</h3>

                <form action="{{ url_for('nebula_add_user') }}" method='post'>
                    <div class="form-group">
                        <label for="user">User</label>
                        <input type="text" class="form-control" name="user" id="user" data-toggle="tooltip" title="Enter the username">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" name="password" id="password" data-toggle="tooltip" title="Enter a strong password">
                    </div>
                    <div class="form-group">
                        <label for="role">Role</label>
                        <select class="form-control" name="role" id="role">
                            <option value="user" selected>Select a role</option>
                            <option value="user">User</option>
                            <option value="demo">Demo</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                    <div class="form-group mt-3">
                        <button type="submit" class="btn btn-dark">Submit</button>
                    </div>
                </form>
            </div>

            <div class="col-lg-6">
                <h3>Manage Existing Accounts</h3>

                <div class="table-responsive">
                    <table id="table-scenarios" class="table small table-hover table-centered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>User</th>
                            <th>Role</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for number, user, role in users %}
                        <tr>
                            <td>{{ number }}</td>
                            <td>{{ user }}</td>
                            <td>{{ role }}</td>
                            <td class="td-icons">
                                <a id="remove-btn" data-user-name="{{ user }}" class="label btn btn-danger" href="{{ url_for('nebula_delete_user', user=user) }}" onclick="return confirm('Are you sure you want to delete this account?');">
                                    Delete
                                </a>
                                <a id="update-btn" data-user-name="{{ user }}" data-user-role="{{ role }}" class="label btn btn-danger" style="margin-left: 5px;">
                                    Update
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    // Update button click and modal to change password and role
    $(document).on('click', '#update-btn', function () {
        var user = $(this).data('user-name');
        var role = $(this).data('user-role');
        $('#user-modal-title').text('Update user ' + user);
        $('#user-modal-content').html(
            '<form action="/nebula/user/update" method="POST">' +
            '<div class="form-group">' +
            '<label for="user">User</label>' +
            '<input type="text" class="form-control" name="user" id="user" value="' + user + '" readonly>' +
            '</div>' +
            '<div class="form-group">' +
            '<label for="role">Role</label>' +
            '<input type="text" class="form-control" name="oldrole" id="oldrole" value="' + role.charAt(0).toUpperCase() + role.slice(1) + '" readonly>' +
            '</div>' +
            '<div class="form-group">' +
            '<label for="role">New Role</label>' +
            '<select class="form-control" name="role" id="role">' +
            '<option value="user">User</option>' +
            '<option value="demo">Demo</option>' +
            '<option value="admin">Admin</option>' +
            '</select>' +
            '</div>' +
            '<div class="form-group">' +
            '<label for="password">New Password</label>' +
            '<input type="password" class="form-control" name="password" id="password" data-toggle="tooltip" title="Enter a strong password">' +
            '</div>' +
            '<div class="form-group">' +
            '<button type="submit" class="btn btn-dark">Submit</button>' +
            '</div>' +
            '</form>'
        );
        $('#user-modal').modal('show');
    });
</script>

{% endblock %}
