{% 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;
}

#assetTree2.ztree * {
    background-color: #f8fafb;
}
#assetTree2.ztree {
    background-color: #f8fafb;
}
</style>

<div class="wrapper wrapper-content">
   <div class="row">
       <div class="col-lg-12 animated fadeInRight" id="split-right">
           <div class="mail-box-header">
               <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>
       </div>
   </div>
</div>

<script>
var ldap_users_table = 0;
function initLdapUsersTable() {
    if(ldap_users_table){
        return
    }
    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: 10
    };

    ldap_users_table = jumpserver.initDataTable(options);
    return ldap_users_table
}


$(document).ready(function(){
}).on('show.bs.modal', function () {
    initLdapUsersTable();
})
.on('click','.close_btn1',function () {
    window.location.reload()
})
.on('click','.close_btn2',function () {
    window.location.reload()
})

</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 %}



