{% extends 'users.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% set sidebar_state = 'disabled' %}
{% set btn_back = true %}

{% block nav_user_add %}active{% endblock %}
{% block content %}

<h1 class="m-5">{% block subhead_heading %}{% endblock %}</h1>

<form action="{% block form_action %}{% endblock %}" method="post" class="form">
    {{ form.hidden_tag() }}

    <div class="form-group">
        {{ form.username.label(class_='form-label') }}
        {{ form.username(class_='form-control') }}
    </div>

    <div class="form-group">
        {{ form.pwd.label(class_='form-label') }}
        {% block pwd_field %}{{ form.pwd(class_='form-control') }}{% endblock %}
    </div>

    <div class="form-group">
        {{ form.pwd_confirm.label(class_='form-label') }}
        {% block pwd_confirm_field %}{{ form.pwd_confirm(class_='form-control') }}{% endblock %}
    </div>

    <div class="form-group">
        <div class="custom-control custom-switch">
            {{ form.admin(class_="custom-control-input", id="adminToggle") }}
            <label class="custom-control-label" for="adminToggle">{{ form.admin.label.text }}</label>
        </div>
    </div>

    <!-- jQuery -->
    <script src="{{ url_for('static', filename='AdminLTE/plugins/jquery/jquery.min.js') }}"></script>
    <script>
        $(document).ready(function(){

            var isAdminEnabled = $('#adminToggle').is(':checked');
            if(isAdminEnabled) {
                $('#PermissionSection').hide();
            }

            $('#adminToggle').change(function() {
                isAdminEnabled = $(this).is(':checked');
                $('#PermissionSection').toggle(!isAdminEnabled);
            });
        });
    </script>

    <div id="PermissionSection">
        <div class="form-group">
            <label class="form-label">{{ _('Permissions') }}</label>
            <table class="text-center table">
                <thead>
                    <tr>
                        <th></th>
                        <th>{{ form.client_permissions.add.label.text }}</th>
                        <th>{{ form.client_permissions.update.label.text }}</th>
                        <th>{{ form.client_permissions.delete.label.text }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>{{ form.client_permissions.label }}</th>
                        <td>{{ form.client_permissions.add() }}</td>
                        <td>{{ form.client_permissions.update() }}</td>
                        <td>{{ form.client_permissions.delete() }}</td>
                    </tr>
                    <tr>
                        <th>{{ form.center_permissions.label }}</th>
                        <td>{{ form.center_permissions.add() }}</td>
                        <td>{{ form.center_permissions.update() }}</td>
                        <td>{{ form.center_permissions.delete() }}</td>
                    </tr>
                    <tr>
                        <th>{{ form.room_permissions.label }}</th>
                        <td>{{ form.room_permissions.add() }}</td>
                        <td>{{ form.room_permissions.update() }}</td>
                        <td>{{ form.room_permissions.delete() }}</td>
                    </tr>
                    <tr>
                        <th>{{ form.folder_permissions.label }}</th>
                        <td>{{ form.folder_permissions.add() }}</td>
                        <td>{{ form.folder_permissions.update() }}</td>
                        <td>{{ form.folder_permissions.delete() }}</td>
                    </tr>
                    <tr>
                        <th>{{ form.image_permissions.label }}</th>
                        <td>{{ form.image_permissions.add() }}</td>
                        <td>{{ form.image_permissions.update() }}</td>
                        <td>{{ form.image_permissions.delete() }}</td>
                    </tr>
                    <tr>
                        <th>{{ form.repository_permissions.label }}</th>
                        <td>{{ form.repository_permissions.add() }}</td>
                        <td>{{ form.repository_permissions.update() }}</td>
                        <td>{{ form.repository_permissions.delete() }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="form-group">
            {{ form.scopes.label(class_='form-label') }}
            <div class="form-text text-muted">{{ form.scopes.description }}</div>
            <div>
                {% for value, label, checked in form.scopes.iter_choices() %}
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="{{ form.scopes.name }}" value="{{ value }}" {% if checked %} checked {% endif %}>
                        <label class="form-check-label">{{ label }}</label>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="form-group">
        {{ form.submit_btn(class_='btn btn-primary') }}
    </div>
</form>

{% endblock %}