<div class="modal-xl modal-dialog" role="document">
    <div class="modal-content" id="modal_access_control_content">
        <div class="modal-header">
            <div class="row w-100 d-flex justify-content-center">
                <h4 class="modal-title ml-4 mt-3">{% if not user.user_id %}Add User{% else %} Edit user {% endif %}</h4>

                <div class="col">
                    {% if user.user_id %}
                    <ul class="nav nav-pills nav-default justify-content-center" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active show" data-toggle="pill" href="#user_details_tab" role="tab" aria-controls="user_details_tab" aria-selected="false">Info</a>
                        </li>

                        <li class="nav-item submenu">
                            <a class="nav-link"  data-toggle="pill" href="#user_permissions_tab" role="tab" aria-controls="user_permissions_tab" aria-selected="false">Permissions</a>
                        </li>

                        <li class="nav-item submenu">
                            <a class="nav-link"  data-toggle="pill" href="#user_groups_tab" role="tab" aria-controls="user_groups_tab" aria-selected="false">Groups</a>
                        </li>

                        <li class="nav-item submenu">
                            <a class="nav-link"  data-toggle="pill" href="#user_clients_tab" role="tab" aria-controls="user_clients_tab" aria-selected="false">Customers</a>
                        </li>

                        <li class="nav-item submenu">
                            <a class="nav-link"  data-toggle="pill" href="#user_cac_tab" role="tab" aria-controls="user_cac_tab" aria-selected="false">Cases access</a>
                        </li>

                    </ul>
                    {% endif %}
                </div>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            </div>
        </div>
        <div class="modal-body">
            <div role="tabpanel">
                <div class="tab-content">
                    <div class="tab-pane active" id="user_details_tab">
                        <div class="container col-md-12">
                            <form method="post" action="" id="form_new_user">
                                <div class="col-md-12 col-lg-12 col-sm-12">
                                    {{ form.hidden_tag() }}
                                    {% if not user.user_id %}
                                        <p class="ml-3"><i class="fa-solid fa-circle-info mr-2"></i>Permissions and groups memberships can be set once the user is created.</p>
                                    {% endif %}
                                    {% if user.user_is_service_account %}
                                        <p class="ml-3 text-warning-high"><i class="fa-solid fa-circle-info mr-2"></i>This is a service account. It cannot login interactively nor have a password.</p>
                                    {% endif %}
                                    <div class="form-group">
                                        <label for="user_name" class="mr-4">Full name
                                        </label>
                                        {{ form.user_name(class='form-control',  autocomplete="off") }}
                                    </div>
                                    <div class="form-group mt-3">
                                        <label for="user_login" class="placeholder">Login</label>
                                        {{ form.user_login(class='form-control',  autocomplete="off") }}
                                    </div>
                                    <div class="form-group mt-3">
                                        <label for="user_email" class="placeholder">Email</label>
                                        {{ form.user_email(class='form-control',  autocomplete="off") }}
                                    </div>
                                     {% if not user.user_is_service_account %}
                                    <div class="form-group mt-3" id="formGroupUserPassword">
                                        <label for="user_pwd" class="placeholder">Password (optional for service accounts)</label>
                                        <ul>
                                            <li><small>Must contain at least {{ server_settings.password_policy_min_length }} chars</small></li>
                                            {% if server_settings.password_policy_upper_case %}
                                                <li class="text-sm"><small>Must contain at least an upper case</small></li>
                                            {% endif %}
                                            {% if server_settings.password_policy_lower_case %}
                                                <li class="text-sm"><small>Must contain at least a lower case</small></li>
                                            {% endif %}
                                            {% if server_settings.password_policy_digit %}
                                                <li class="text-sm"><small>Must contain at least a digit</small></li>
                                            {% endif %}
                                            {% if server_settings.password_policy_special_chars %}
                                                <li class="text-sm"><small>Must contain at least one of : {{ server_settings.password_policy_special_chars }}</small></li>
                                            {% endif %}
                                        </ul>

                                        <div class="input-group mb-3">
                                            {{ form.user_password(class='form-control', autocomplete="off") }}
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    <div class="user_show_password" id="toggle_user_password"><i class="fa-solid fa-eye"></i></div>
                                                </span>
                                            </div>
                                        </div>

                                    </div>
                                    {% endif %}
                                    {% if not user.user_id %}
                                    <div class="form-group mt-3">

                                        <div class="form-check">
                                            <label class="form-check-label mt-3" >
                                                {{ form.user_is_service_account(class="form-check-input", type="checkbox") }}
                                                <span class="form-check-sign" id="formCheckIsServiceAccount">  Use as service account
                                                    <i class="ml-1 mt-1 fa-regular fa-circle-question" title="If checked, the user won't appear in the attribution suggestions and won't be able to connect on the UI" style="cursor:pointer;"></i>
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% if user.user_id %}
                                        <div class="form-group mt-3">
                                            <label for="user_id" class="placeholder">User ID</label>
                                            <input autocomplete="off" class="form-control" type="text" value="{{ user.user_id }}" disabled>
                                        </div>
                                        <div class="form-group mt-3">
                                            <label for="user_uuid" class="placeholder">User UUID</label>
                                            <input autocomplete="off" class="form-control" type="text" value="{{ user.user_uuid }}" disabled>
                                        </div>
                                        <div class="form-group mt-3">
                                            <label for="userApiKey" class="placeholder">User API Key</label>
                                            <div class="input-group">
                                                <input autocomplete="off" class="form-control" type="text" value="{{ user.user_api_key }}" id="userApiKey" disabled>
                                                <div class="input-group-append">
                                                    <button class="btn btn-sm btn-dark" type="button" onclick="renew_api_for_user({{ user.user_id }})">Renew</button>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                                {% if user.user_id %}
                                    <button type="button" class="btn btn-danger mt-5"
                                    onclick="delete_user('{{ user.user_id }}');">Delete</button>
                                    {% if user.user_active %}
                                    <button type="button" class="btn btn-outline-danger mt-5"
                                    onclick="deactivate_user('{{ user.user_id }}');">Deactivate</button>
                                    {% else %}
                                    <button type="button" class="btn btn-outline-success mt-5"
                                    onclick="activate_user('{{ user.user_id }}');">Activate</button>
                                    {% endif %}

                                    <button type="button" class="btn btn-outline-success ml-1 mt-5 float-right"
                                    id="submit_new_user">Update</button>

                                    <button type="button" class="btn btn-dark mt-5 float-right"
                                    onclick="refresh_user_ac('{{ user.user_id }}');" id="users_refresh_ac_btn">Refresh access</button>

                                    {% if server_settings.enforce_mfa %}
                                    <button type="button" class="btn btn-dark mt-5 mr-2 float-right"
                                    onclick="reset_user_mfa('{{ user.user_id }}');" id="users_reset_mfa_btn">Reset MFA</button>
                                    {% endif %}

                                {% else %}

                                    <button type="button" class="btn btn-outline-success ml-4 mt-5 float-right"
                                    id="submit_new_user">Save</button>

                                {% endif %}
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="user_permissions_tab">
                        <div class="container col-md-12">
                            <p class="mb-4"><i class="fa-solid fa-circle-info mr-2"></i>Permissions are inherited from the groups the user belongs to. The table shows the effective permissions the user has on the platform.</p>
                            <table class="table table-striped" id="user_permissions_table">
                                <thead>
                                    <tr>
                                        <th>Permission</th>
                                        <th>Value</th>
                                        <th>Inherited from groups</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for perm in user.user_permissions %}
                                    <tr>
                                        <td>{{ user.user_permissions[perm].name }}</td>
                                        <td>0x{{ perm | int(perm,16) }}</td>
                                        <td>{% for group in user.user_permissions[perm].inherited_from %}<span class="badge ml-2 badge-light">{{ group }}</span>{% endfor %}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane" id="user_groups_tab">
                        <div class="row">
                            <div class="container col-md-12">
                                <span class="ml-2 mt-3">Groups the user is member of.</span>
                                <button class="btn btn-dark btn-sm pull-right mr-2" onclick="manage_user_groups({{ user.user_id }});">
                                    <span class="menu-title">Manage</span>
                                </button>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="container col-md-12">
                                <table class="table table-striped" id="user_groups_table">
                                    <thead>
                                        <tr>
                                            <th>Group name</th>
                                            <th>Group ID</th>
                                            <th>Group UUID</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for group in user.user_groups %}
                                        <tr>
                                            <td>{{ group.group_name }}</td>
                                            <td>{{ group.group_id }}</td>
                                            <td>{{ group.group_uuid }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="user_clients_tab">
                        <div class="row">
                            <div class="container col-md-12">
                                <span class="ml-2 mt-3">Customers the user belongs to.</span>
                                <button class="btn btn-dark btn-sm pull-right mr-2" onclick="manage_user_clients({{ user.user_id }});">
                                    <span class="menu-title">Manage</span>
                                </button>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="container col-md-12">
                                <table class="table table-striped" id="user_clients_table">
                                    <thead>
                                        <tr>
                                            <th>Customer</th>
                                            <th>Customer ID</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for customer in user.user_customers %}
                                        <tr>
                                            <td>{{ customer.customer_name }}</td>
                                            <td>{{ customer.customer_id }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="user_cac_tab">
                        <div class="container col-md-12" >
                              <div class="row d-flex mb-4">
                                <div class="col-8">
                                    <span>Cases accesses are usually inherited from groups memberships. These are not displayed here. This tab allows to add granular case access if necessary.</span>
                                </div>
                                <div class="col-4 pull-right">
                                    <button class="btn btn-dark btn-sm pull-right" onclick="refresh_user_cac({{ user.user_id }});">
                                        <span class="menu-title">Refresh</span>
                                    </button>
                                    <button class="btn btn-dark btn-sm pull-right mr-2" onclick="manage_user_cac({{ user.user_id  }});">
                                        <span class="menu-title" id="manage_user_cac_button">Set case access</span>
                                    </button>
                                </div>
                              </div>
                            <div class="row mt-4">
                              <table class="table display table-striped table-hover responsive" width="100%" cellspacing="0" id="user_cac_table" >
                                <thead>
                                  <tr>
                                      <th>Case ID</th>
                                      <th>Case Name</th>
                                      <th>Access</th>
                                  </tr>
                                </thead>
                                <tfoot>
                                  <tr>
                                    <th>Case ID</th>
                                    <th>Case Name</th>
                                    <th>Access</th>
                                  </tr>
                                </tfoot>
                              </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $('#toggle_user_password').on('click', function (e) {
                const type = $('#user_password').attr('type') === 'password' ? 'text' : 'password';
                $('#user_password').attr('type', type);
                $('#toggle_user_password > i').attr('class', type === 'password' ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash');
            });

            $('#user_permissions_table').dataTable({
                "order": [[ 1, "asc" ]]});
            $('#user_clients_table').dataTable({
                "order": [[ 1, "asc" ]]});
            $('#user_groups_table').dataTable({
                "order": [[ 1, "asc" ]],
                "columns": [{
                    "title": "Group name",
                    "render": function ( data, type, row, meta ) {
                        if (type === 'display' ) {
                            return `<i class="fa-solid fa-trash-can mr-2 text-danger" style="cursor:pointer;" title="Remove from group" href="javascript:void(0)" onclick="remove_member_from_group_wrap('${row[1]}','{{ user.user_id }}')"></i>${sanitizeHTML(data)}`;
                        }
                        return data;
                    }},
                    {"title": "Group ID"},
                    {"title": "Group UUID"}
                    ]
                });

            var modal_user_cac_table = $("#user_cac_table").DataTable({
                dom: 'Blfrtip',
                aaData: [],
                aoColumns: [
                  {
                    "data": "case_id",
                    "render": function ( data, type, row ) {
                        return `<i class="fa-solid fa-trash-can mr-2 text-danger" style="cursor:pointer;" title="Remove access to case" href="javascript:void(0)" onclick="remove_case_access_from_user('{{ user.user_id }}',${data})"></i>${data}`;
                    },
                    "className": "dt-center"
                },
                {
                    "data": "case_name",
                    "className": "dt-center",
                    "render": function (data, type, row) {
                        return `<a target="_blank" rel="noopener" href="/case?cid=${row.case_id}">${sanitizeHTML(data)}</a>`;
                    }
                },
                {
                    "data": "access_level_list",
                    "render": function ( data, type, row ) {
                        ret_data = "";
                        for (acc in data) {
                            ret_data += `<span class="badge ml-2 badge-light">${data[acc].name}</span>`
                        }
                        return ret_data;
                    },
                    "className": "dt-center"
                }
                ],
                filter: true,
                info: true,
                ordering: true,
                processing: true,
                select: true
        });

        var actionOptionsUser = {
            classes: [],
            contextMenu: {
                enabled: true,
                isMulti: true,
                xoffset: -10,
                yoffset: -10,
                headerRenderer: function (rows) {
                    if (rows.length > 1) {
                        return rows.length + ' items selected';
                    } else {
                        let row = rows[0];
                        return 'Quick action';
                    }
                },
            },
            buttonList: {
                enabled: false,
            },
            deselectAfterAction: true,
            items: [],
        };

        actionOptionsUser.items.push({
                    type: 'option',
                    title: 'Remove access',
                    multi: true,
                    iconClass: 'fas fa-trash',
                    buttonClasses: ['btn', 'btn-outline-primary'],
                    action: function(rows){
                        remove_cases_access_from_user_table('{{ user.user_id }}', rows);
                    }
                });
        modal_user_cac_table.contextualActions(actionOptionsUser);

        {% if user.user_id %}
            current_user_cases_access_list = {{ user.user_cases_access|tojson }};
            modal_user_cac_table.rows.add(current_user_cases_access_list);
            modal_user_cac_table.columns.adjust().draw();
        {% endif %}

        </script>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->