{% extends "layout2.html" %}
{% load i18n %}
{% load static %}

{% block css_include %}


{% endblock %}

{% block js_include %}

{% endblock %}


{% block content %}

  <section class="content">
    <div class="row">
      <div class="col-md-12">
        <form id="ldap_edit_form" class="form-horizontal bootstrap-validator-form" action="" method="post" novalidate="novalidate">
          {% csrf_token %}
          <div class="row">
            <div class="col-md-12">
              {% if form.non_field_errors or save_error or connection_error or success %}
              <div class="panel">
                <div class="panel-body">
                  {# Print form errors correctly #}
                  {% if form.non_field_errors %}
                    <div class="alert alert-danger alert-dismissible">
                      <h4><i class="icon fa fa-ban"></i> {% translate "Form errors" %}</h4>
                      <div class="tab-content no-padding">
                        {{ form.non_field_errors|safe }}
                      </div>
                    </div>
                  {% endif %}
                  {# If there is save/configuration errors #}
                  {% if save_error %}
                    <div class="alert alert-danger alert-dismissible nav-tabs-custom">
                      <ul class="nav nav-tabs pull-right ui-sortable-handle">
                        <li><a href="#tab_2" data-toggle="tab">{% translate "Advanced informations" %}</a></li>
                        <li class="active"><a href="#tab_1" data-toggle="tab">{% translate "Message" %}</a></li>
                        <li class="pull-left header"><i class="fa fa-inbox"></i>{% translate "Configuration error" %}</li>
                      </ul>
                      <div class="tab-content no-padding">
                        <div class="tab-pane active" id="tab_1">
                          <pre>{{ save_error.0 }}</pre>
                        </div>
                        <div class="tab-pane" id="tab_2">
                          <pre>{{ save_error.1 }}</pre>
                        </div>
                      </div>
                    </div> <!-- /.alert -->
                  {% endif %}
                  {# If there is connection test errors #}
                  {% if connection_error %}
                    <div class="alert alert-danger alert-dismissible nav-tabs-custom">
                      <h4>Connection error</h4>
                      {{ connection_error }}
                    </div> <!-- /.alert -->
                  {% endif %}
                  {# If there is success message #}
                  {% if success %}
                    <div class="alert alert-success alert-dismissible nav-tabs-custom">
                      <h4>Success</h4>
                      {{ success }}
                    </div> <!-- /.alert -->
                  {% endif %}
                </div> <!-- /.box-body -->
              </div> <!-- /.box -->
              {% endif %}
              <div class="panel">
                <div class="panel-header with-border">
                  <h1 class="panel-title"><i class="fa fa-sitemap">&nbsp;</i>{% translate "LDAP Repository edition" %}</h1>
                </div>
                <div class="panel-body">
                  <div class="nav-tabs-custom nav-tabs-no-margin">
                    <ul class="nav nav-tabs">
                      <li class="active"><a href="#tab_general" data-toggle="tab">{% translate "Connection settings" %}</a></li>
                      <li><a href="#tab_user" data-toggle="tab">{% translate "User settings" %}</a></li>
                      <li><a href="#tab_group" data-toggle="tab">{% translate "Group settings" %}</a></li>
                    </ul>
                    <div class="tab-content">
                      <br/>
                      <div class="tab-pane active" id="tab_general">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.name.label }}</label>
                                <div class="col-sm-5">
                                  {{form.name}}
                                  {{form.name.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                            <label class="col-sm-4 control-label">{{ form.host.label }}</label>
                              <div class="col-sm-5">
                                {{form.host}}
                                {{form.host.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.port.label }}</label>
                                <div class="col-sm-5">
                                  {{form.port}}
                                  {{form.port.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.protocol.label }}</label>
                                <div class="col-sm-5">
                                  {{form.protocol}}
                                  {{form.protocol.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.encryption_scheme.label}}</label>
                                <div class="col-sm-5">
                                  {{form.encryption_scheme}}
                                  {{form.encryption_scheme.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.connection_dn.label}}</label>
                              <div class="col-sm-5">
                                {{form.connection_dn}}
                                {{form.connection_dn.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.dn_password.label}}</label>
                                <div class="col-sm-5">
                                  {{form.dn_password}}
                                  {{form.dn_password.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.base_dn.label}}</label>
                                <div class="col-sm-5">
                                  {{form.base_dn}}
                                  {{form.base_dn.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-sm-12" style="text-align:center;">
                            <button name="connection_test" id="connection_test" class="btn btn-success btn-flat" value="test"><span>{% translate "Test LDAP connection" %}</span></button>
                          </div>
                        </div> <!-- /.row -->
                      </div> <!-- /.tab-pane -->
                      <div class="tab-pane" id="tab_user">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.user_scope.label }}</label>
                                <div class="col-sm-5">
                                  {{form.user_scope}}
                                  {{form.user_scope.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                            <label class="col-sm-4 control-label">{{ form.user_dn.label }}</label>
                              <div class="col-sm-3">
                                {{form.user_dn}}
                                {{form.user_dn.errors|safe}}
                              </div>
                              <div class="col-sm-2">
                                <input id="user_dn" type="text" class="form-control" disabled=""/>
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                            <label class="col-sm-4 control-label">{{ form.user_objectclasses.label }}</label>
                              <div class="col-sm-5">
                                {{form.user_objectclasses}}
                                {{form.user_objectclasses.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.user_attr.label }}</label>
                                <div class="col-sm-5">
                                  {{form.user_attr}}
                                  {{form.user_attr.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.user_filter.label }}</label>
                                <div class="col-sm-5">
                                  {{form.user_filter}}
                                  {{form.user_filter.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.user_account_locked_attr.label }}</label>
                                <div class="col-sm-5">
                                  {{form.user_account_locked_attr}}
                                  {{form.user_account_locked_attr.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.user_change_password_attr.label}}</label>
                              <div class="col-sm-5">
                                {{form.user_change_password_attr}}
                                {{form.user_change_password_attr.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <!-- Advanced tab -->
                        <div class="row">
                          <div class="col-sm-4 pull-right">
                            <div class="form-group">
                              <button class="btn btn-box-tool" type="button" data-toggle="collapse" data-target=".user_attributes">
                                <i class="fa fa-plus"></i> {% trans "Attributes" %}
                              </button>
                            </div>
                          </div>
                        </div>
                        <div class="form-group collapse user_attributes">
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.user_groups_attr.label}}</label>
                                <div class="col-sm-5">
                                  {{form.user_groups_attr}}
                                  {{form.user_groups_attr.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div> <!-- /.row -->
                          <div class="row">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.user_mobile_attr.label}}</label>
                                  <div class="col-sm-5">
                                    {{form.user_mobile_attr}}
                                    {{form.user_mobile_attr.errors|safe}}
                                  </div>
                              </div>
                            </div>
                          </div> <!-- /.row -->
                          <div class="row">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.user_email_attr.label}}</label>
                                  <div class="col-sm-5">
                                    {{form.user_email_attr}}
                                    {{form.user_email_attr.errors|safe}}
                                  </div>
                              </div>
                            </div>
                          </div> <!-- /.row -->
                          <div class="row">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{% trans "Custom attributes mapping" %}</label>
                                <div class="col-sm-5">
                                  <div class="row">
                                    <div class="col-sm-12">
                                      <table id="custom_attributes_table" class="table table-striped table-bordered table-hover dt-responsive nowrap table-datatable collapse">
                                        <thead>
                                          {{custom_attributes_form.as_table_headers|safe}}
                                        </thead>
                                        <tbody>
                                          {% for custom_attribute in custom_attributes %}
                                          {{ custom_attribute.as_table_td|safe }}
                                          {% endfor %}
                                        </tbody>
                                      </table>
                                      <input id="custom_attributes" name="custom_attributes" value="" type="hidden">
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-sm-12">
                                      <button class="addlink addplus" id="add_custom_attribute" type="button">{% trans "Add an attribute" %}</button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div> <!-- /.row -->
                        </div>  <!-- /.user_attributes -->
                        <div class="row">
                          <div class="col-sm-12" style="text-align:center;">
                            <button name="user_search_test" id="user_search_test" class="btn btn-success btn-flat"><span>{% translate "Test User authentication settings" %}</span></button>
                          </div>
                        </div> <!-- /.row -->
                      </div> <!-- /.tab-pane /#tab_user -->
                      <div class="tab-pane" id="tab_group">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.group_scope.label }}</label>
                                <div class="col-sm-5">
                                  {{form.group_scope}}
                                  {{form.group_scope.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                            <label class="col-sm-4 control-label">{{ form.group_dn.label }}</label>
                              <div class="col-sm-3">
                                {{form.group_dn}}
                                {{form.group_dn.errors|safe}}
                              </div>
                              <div class="col-sm-2">
                                <input id="group_dn" type="text" class="form-control" disabled=""/>
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                            <label class="col-sm-4 control-label">{{ form.group_objectclasses.label }}</label>
                              <div class="col-sm-5">
                                {{form.group_objectclasses}}
                                {{form.group_objectclasses.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.group_attr.label }}</label>
                                <div class="col-sm-5">
                                  {{form.group_attr}}
                                  {{form.group_attr.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.group_filter.label }}</label>
                                <div class="col-sm-5">
                                  {{form.group_filter}}
                                  {{form.group_filter.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.group_member_attr.label }}</label>
                                <div class="col-sm-5">
                                  {{form.group_member_attr}}
                                  {{form.group_member_attr.errors|safe}}
                                </div>
                            </div>
                          </div>
                        </div> <!-- /.row -->
                        <div class="row">
                          <div class="col-sm-12" style="text-align:center;">
                            <button id="group_search_test" class="btn btn-success btn-flat"><span>{% translate "Test group settings" %}</span></button>
                          </div>
                        </div> <!-- /.row -->
                      </div> <!-- /.tab-pane -->
                    </div> <!-- /.tab-content -->
                  </div> <!-- /.nav-tabs-custom -->
                </div> <!-- /.box-body -->
                <div class="panel-footer">
                  <a type="button" href="{% url 'authentication.ldap.list' %}" class="btn btn-flat btn-default">{% translate "Cancel" %}</a>
                  <button type="submit" class="btn btn-info btn-flat pull-right" {% if not object_id and not success %}disabled style="display:none;"{% endif %}>{% translate "Save" %}</button>
                </div> <!-- /.box-footer -->
              </div> <!-- /.box -->
            </div>
          </div>
        </form>
      </div> <!-- /.col-md-12 -->
    </div> <!-- /.row -->


    <div id="modal_test_user_search" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">{% translate "User authentication test" %}</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-sm-6 control-label">{% translate "Username" %}</label>
                <div class="col-sm-6 form-group">
                  <input type="text" name="test_username" id="test_username" data-placement="right" container="body" class="form-control has-popover" data-original-title="" title="">
                </div>
            </div>
            <div class="row">
              <label class="col-sm-6 control-label">{% translate "Password" %}</label>
              <div class="col-sm-6 form-group">
                <input type="password" name="test_password" id="test_password" data-placement="right" container="body" class="form-control has-popover" data-original-title="" title="">
              </div>
            </div>
            <br/>
            <div class="row">
              <div class="col-sm-12">
                <p id="user_search_test_msg" class="test_user"></p>
                <div id="user_phone" class="test_user"></div>
                <div id="user_email" class="test_user"></div>
                <div id="account_locked" class="test_user"></div>
                <div id="password_expired" class="test_user"></div>
                <div id="user_groups" class="test_user"></div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">{% translate "Cancel" %}</button>
            <button type="button" id="btn_send_user_search" class="btn btn-success btn-flat">{% translate "Test credentials" %}</button>
          </div>
        </div>
      </div>
    </div>

    <div id="modal_test_group_search" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">{% translate "Group list test" %}</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-sm-6 control-label">{% translate "Group name" %}</label>
              <div class="col-sm-6 form-group">
                <input type="text" name="test_group" id="test_group" data-placement="right" container="body" class="form-control has-popover" data-original-title="" title="">
              </div>
            </div>
            <br/>
            <div class="row">
              <div id="group_results" class="col-sm-12">
                <p id="group_search_test_msg" class="test_group"></p>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">{% translate "Cancel" %}</button>
            <button type="button" id="btn_send_group_search" class="btn btn-success btn-flat">{% translate "Search" %}</button>
          </div>
        </div>
    </div>
  </div>
</section> <!-- /.content -->

{% endblock %}

{% block jquery_code %}

  var custom_attributes_form_td = `{{custom_attributes_form.as_table_td|safe}}`;

  function show_hide_custom_attributes_table_header() {
    var numRows = $('#custom_attributes_table tbody tr').length;
    if (numRows === 0) {
      $('#custom_attributes_table').addClass('collapse');
    } else {
      $('#custom_attributes_table').removeClass('collapse');
    }
  }

  /* All events to refresh (re-apply) after a table is modified */
  function refresh_table_events() {

    show_hide_custom_attributes_table_header();

    /* Function used to delete an object .btnDelete */
    $('.btnDelete').on('click', function(e) {
      $(this).parent().remove();
      var numRows = $('#custom_attributes_table tbody tr').length;
      if (numRows === 0) {
        $('#custom_attributes_table').addClass('collapse');
      }
    });
  }

  if (!String.prototype.endsWith) {
    String.prototype.endsWith = function(searchString, position) {
      var subjectString = this.toString();
      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
        position = subjectString.length;
      }
      position -= searchString.length;
      var lastIndex = subjectString.lastIndexOf(searchString, position);
      return lastIndex !== -1 && lastIndex === position;
    };
  }

  /* Initialize select2 objects */
  $('.select2').select2();

  /* Switchery mandatory code */
  var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function(html) {
    var switchery = new Switchery(html, {
      'color': '#FA9834',
    });
  });


  /* Change port value according to chosen encryption scheme */
  $('#id_encryption_scheme').on("change", function(e) {
    var port = 0;
    switch($(this).val()) {
      case "none":
          $(id_port).val(389);
          break;
      case "ldaps":
          $(id_port).val(636);
          break;
      case "start-tls":
        $(id_port).val(389);
    }
  });

  /* Show OAuth2 options if oauth2 enabled */
  $('#id_enable_oauth2').on("change", function(e) {
    if( document.querySelector('#id_enable_oauth2').checked ) {
      $('.oauth2').show();
    } else {
      $('.oauth2').hide();
    }
  });
  $('#id_enable_oauth2').trigger("change");

  $('#id_base_dn').on("change", function(e) {
    $('#user_dn').val($(this).val());
    $('#group_dn').val($(this).val());
  });
  $('#id_base_dn').trigger("change");


  function handle_form_errors(data){
    if (typeof(data['form_errors']) !== 'undefined'){
      $('.errorlist').remove();
      $.each(data['form_errors'], function(field_name, error_list){
        field_selector = $('#id_'+field_name);
        var ul = $('<ul/>').insertAfter(field_selector);
        $.each(error_list, function(idx, err_msg){
          console.log(err_msg);
          var li = $('<li/>').addClass('errorlist').attr('role', 'menuitem').appendTo(ul);
          var group = $('<span/>').text(err_msg).appendTo(li);
        });
      });
    }
  }

  /* Add default LDAPCustomAttributeMappingForm to custom_attributes_table */
  $("#add_custom_attribute").on("click", function(e) {
    show_hide_custom_attributes_table_header();
    $('#custom_attributes_table').append(custom_attributes_form_td);
    refresh_table_events();
  });


  /*User search test*/
  $('#user_search_test').on("click", function(e){
    $('.test_user').html('');
    $("#modal_test_user_search").modal('show');
    e.preventDefault();
  });


  $('#btn_send_user_search').on("click", function(e){
    $('.test_user').html('');
    username = $('#test_username').val();
    password = $('#test_password').val();
    url = "/authentication/ldap/user_search_test/";
    form_data = $('#ldap_edit_form').serializeArray();
    var indexed_data = {};
    $.map(form_data, function(n, i){
        indexed_data[n['name']] = n['value'];
    });
    indexed_data['username'] = username;
    indexed_data['password'] = password;
    {% if object_id %}indexed_data['id'] = "{{object_id}}"; {% endif %}
    $.post(url, indexed_data, function(data){
      status = data['status'];
      handle_form_errors(data);
      if(status == 'true'){
        $('#user_search_test_msg').html('<b style="color:green;">{% translate "Successful connection" %}</b>');
      }
      else{
        reason = data['reason'];
        $('#user_search_test_msg').html("<b style='color:red;'>{% translate 'Unable to authenticate user, reason: '%}" + reason + "</b>");
      }
      $('#user_phone').html('{% translate "Phone number" %}: '+ data['user_phone']);
      $('#user_email').html('{% translate "Email address" %}: '+ data['user_email']);
      $('#account_locked').html('{% translate "Account locked" %}: '+ data['account_locked']);
      $('#password_expired').html('{% translate "Need change pass" %}: '+ data['password_expired']);
      $('#user_groups').html('{% translate "User groups" %}:');
      group_list = $('#user_groups');
      var ul = $('<ul/>').appendTo(group_list);
      $.each(data['user_groups'], function(i)
      {
        var li = $('<li/>').addClass('ui-menu-item').attr('role', 'menuitem').appendTo(ul);
        var group = $('<span/>').text(data['user_groups'][i]).appendTo(li);
      });
    });
  });


  /*Group search test*/
  $('#group_search_test').on("click", function(e){
      $('.test_group').html('');
      $("#modal_test_group_search").modal('show');
      e.preventDefault();
  });


  $('#btn_send_group_search').on("click", function(e){
      $('.test_group').html('');
      group_name = $('#test_group').val();
      url = "/authentication/ldap/group_search_test/";
      form_data = $('#ldap_edit_form').serializeArray();
      var indexed_data = {};
      $.map(form_data, function(n, i){
          indexed_data[n['name']] = n['value'];
      });
      indexed_data['group_name'] = group_name;
      {% if object_id %}indexed_data['id'] = "{{object_id}}"; {% endif %}
      $.post(url, indexed_data, function(data){
          status = data['status'];
          // handle_form_errors(data);
          if(status == 'true'){
              $('#group_search_test_msg').html('<b style="color:green;">{% translate "Successful query" %}</b>');
          }
          else{
              reason = data['reason'];
              $('#group_search_test_msg').html("<b style='color:red;'>{% translate 'Unable to execute query, reason: '%}" + reason + "</b><br>" +
                                               "Form errors : "+ data['form_errors']);
          }
          var groups = [];
          if( data['groups'].length == 0 ) {
              var dn_div = $('<div class="test_group">');
              dn_div.html('{% translate "No result found, please make sure that your query is correct" %}');
              $('#group_results').append(dn_div);
          }
          else {
              groups = data['groups'];

              for( group of groups ) {
                  var dn = group['group_dn'];
                  var members = group['group_members'];

                  var dn_div = $('<div class="test_group">');
                  dn_div.html('{% translate "Group DN" %}: ' + dn);
                  $('#group_results').append(dn_div);

                  var members_div = $('<div class="test_group">');
                  members_div.html('{% translate "Group members" %}: ');
                  var ul = $('<ul/>').appendTo(members_div);
                  $.each(members, function(i)
                  {
                      var li = $('<li/>').addClass('ui-menu-item').attr('role', 'menuitem').appendTo(ul);
                      $('<span/>').text(members[i]).appendTo(li);
                  });
                  $('#group_results').append(members_div);
              }
          }
      });
  });

  $('#ldap_edit_form').submit(function(event) {

    var custom_attributes = new Array();

    $('#custom_attributes_table tbody tr').each(function(index, tr) {
      var id = tr.children[0].innerHTML;
      var ldap_attribute = tr.children[1].children[0].value;
      var output_attribute = tr.children[2].children[0].value;

      custom_attributes.push(
        {
          'id': id,
          'ldap_attribute': ldap_attribute,
          'output_attribute': output_attribute
        });

      console.log(custom_attributes);
    });
    $('#custom_attributes').val(JSON.stringify(custom_attributes));

  });

  refresh_table_events();

  //}); // end of function()

{% endblock %}