{% extends '_modal.html' %}
{% load i18n %}
{% load static %}

{% block modal_class %}modal-lg{% endblock %}
{% block modal_id %}ldap_list_users_modal{% endblock %}
{% block modal_title%}{% trans "LDAP user list" %}{% endblock %}

{% block modal_help_message%} <div class="alert alert-info help-message" style="width: 838px; margin-left: 30px">{% trans 'Please submit the LDAP configuration before import' %}</div>{% endblock %}

{% block modal_body %}
<link href="{% static 'css/plugins/ztree/awesomeStyle/awesome.css' %}" rel="stylesheet">
<script type="text/javascript" src="{% static 'js/plugins/ztree/jquery.ztree.all.min.js' %}"></script>
<script src="{% static 'js/jquery.form.min.js' %}"></script>
<style>
.inmodal .modal-header {
    padding: 10px 10px;
    text-align: center;
}
</style>

<div class="wrapper wrapper-content">
   <div class="row">
       <div class="col-lg-12 animated fadeInRight" id="split-right">
           <div class="mail-box-header">
               <div class="uc pull-left m-r-5"><a  id="id_refresh_cache" class="btn btn-sm btn-primary"> {% trans "Refresh cache" %} </a></div>
               <table class="table table-striped table-bordered table-hover " id="ldap_list_users_table" style="width: 100%">
                   <thead>
                       <tr>
                           <th class="text-center"><input type="checkbox" class="ipt_check_all"></th>
                           <th class="text-center">{% trans 'Username' %}</th>
                           <th class="text-center">{% trans 'Name' %}</th>
                           <th class="text-center">{% trans 'Email' %}</th>
                           <th class="text-center">{% trans 'Existing' %}</th>
                       </tr>
                   </thead>
                   <tbody>
                   </tbody>
               </table>
               <div id="fake_datatable_wrapper_loading" class="dataTables_wrapper" style="display: block;">
                   <div id="ldap_list_users_table_processing" class="dataTables_processing panel panel-default">{% trans 'Loading' %}...</div>
               </div>
           </div>
       </div>
   </div>
</div>

<script>
var ldap_users_table = 0;
var interval;

function initLdapUsersTable() {
    if(ldap_users_table){
        ldap_users_table.ajax.reload(null, false);
        return ldap_users_table
    }
    var options = {
        ele: $('#ldap_list_users_table'),
        ajax_url: '{% url "api-settings:ldap-user-list" %}',
        columnDefs: [
            {targets: 0, createdCell: function (td, cellData, rowData) {
                $(td).html("<input type='checkbox' class='text-center ipt_check' id='ID_USERNAME'>".replace("ID_USERNAME", cellData))
            }},
            {targets: 4, createdCell: function (td, cellData, rowData) {
                if(cellData){
                    $(td).html('<i class="fa fa-check text-navy"></i>')
                }else{
                    $(td).html('<i class="fa fa-times text-danger"></i>')
                }
            }}
        ],
        columns: [
            {data: "username" },{data: "username" }, {data: "name" },
            {data:"email"}, {data:'existing'}
        ],
        pageLength: 15
    };
    ldap_users_table = jumpserver.initServerSideDataTable(options);
    return ldap_users_table
}

function testRequestLdapUser(){
    $("#fake_datatable_wrapper_loading").css('display', 'block');
    var the_url = "{% url 'api-settings:ldap-user-list' %}";
    var error = function (data, status) {
        if (status === 409){
            console.log(data);
            return
        }
        if (status === 400){
            toastr.error(data);
            $("#fake_datatable_wrapper_loading").css('display', 'none');
            clearInterval(interval);
            interval = undefined;
            return
        }
        console.log(data, status)
    };
    var success = function() {
        $("#fake_datatable_wrapper_loading").css('display', 'none');
        initLdapUsersTable();
        clearInterval(interval);
        interval = undefined
    };
    requestApi({
        url: the_url,
        method: 'GET',
        flash_message: false,
        error: error,
        success: success
    });
}

function timingTestRequestLdapUser(){
    if (interval !== undefined){
        return
    }
    interval = setInterval(testRequestLdapUser, 2000);
}

$(document).ready(function(){

}).on('show.bs.modal', function () {
    timingTestRequestLdapUser()
})
.on('click', '#id_refresh_cache', function () {
    var the_url = "{% url "api-settings:ldap-cache-refresh" %}";
    function error(data) {
        toastr.error(data)
    }
    function success(){
        timingTestRequestLdapUser();
    }
    requestApi({
        url: the_url,
        method: 'GET',
        error: error,
        success: success
    })
})
.on("click","#btn_ldap_modal_confirm",function () {
    var username_list = ldap_users_table.selected;
    if (username_list.length === 0){
        var msg = "{% trans 'User is not currently selected, please check the user you want to import'%}";
        toastr.error(msg);
        return
    }
    var the_url =  "{% url "api-settings:ldap-user-import" %}";
    function error(message) {
        toastr.error(message)
    }
    function success(message) {
        toastr.success(message.msg);
        ldap_users_table.selected = [];
        timingTestRequestLdapUser();
    }
    requestApi({
        url: the_url,
        body: JSON.stringify({'username_list':username_list}),
        method: "POST",
        flash_message: false,
        success: success,
        error: error
    });
})

</script>
{% endblock %}

{% block modal_button %}
    <button data-dismiss="modal" class="btn btn-white close_btn2" type="button">{% trans "Close" %}</button>
    <button class="btn btn-primary" type="button" id="{% block modal_confirm_id %}btn_ldap_modal_confirm{% endblock %}">{% trans 'Import' %}</button>
{% endblock %}



