{% extends sitebase.html %}
{%block head%}
<style type="text/css">
  .navlist li
  {
    display: inline;
    padding-right: 20px;
  }
  .portal-select {
    width: 15em;
  }
</style>
<script>
function check_submit(action) {
  //disable submit buttons
  $("#add-button").prop('disabled', true);
  $("#remove-button").prop('disabled', true);
  $("#messages").html("");
  var errors = "";
  var boxes = oTable.$(".selected:checked", {"page": "all"});
  //serialize the checked boxes
  var data = "";
  for(i=0;i<boxes.length;i++) {
    data += "&selected="+boxes[i].value;
  }
  if(data.length === 0) {
    //No checked rows, so add error message if needed and then don't submit
    if(!$('#checkbox-error').length) { errors += "Please select at least one user<br/>"; }
  }
  if(errors.length > 0) {
    $("#add-button").prop('disabled', false);
    $("#remove-button").prop('disabled', false);
    bootstrapAlert(errors, "danger", 80000);
    return false;
  }

  $("#action").val(action);
  data = $('#user-form').serialize() + data;
  $.post('{{submit_url}}', data, function(data,textStatus,jqXHR){
    $("#add-button").prop('disabled', false);
    $("#remove-button").prop('disabled', false);
    if(data.indexOf("ERROR") > -1) {
      bootstrapAlert(data, "danger", 2200);
    }
    else {
      $('#info-table').DataTable().ajax.url("{% raw qiita_config.portal_dir %}/admin/purge_usersAjax/").load();
      bootstrapAlert(data, "success", 2200);
    }
  });
}

function render_checkbox(data, type, full) {
  return "<input type='checkbox' class='selected' onclick='checkbox_change()' value='" + full['email'] + "' />";
}

function checkbox_change() {
  $("#checkbox-error").remove();
}

function checkbox_action(action) {
  var boxes = oTable.$(':checkbox',  {"filter":"applied", "page": "all"});
  if(action == 'check') { boxes.prop('checked',true); }
  else if(action == 'uncheck') { boxes.prop('checked',false); }
  else if(action='invert') { boxes.each( function() {
    $(this).is(':checked') ? $(this).prop('checked',false) : $(this).prop('checked',true);
  });}
  return false;
}


$(document).ready(function() {
  oTable = $('#info-table').dataTable({
    "order": [[6, 'desc']],  // sort by creation timestamp, newest first
    "deferRender": true,
    "iDisplayLength": 50,
    "oLanguage": {
      "sZeroRecords": "Nice and clean: No users found that registered more than 30 days ago and are not yet validated."
    },
    "columns": [
      {"className": 'select', "data": null},
      {% for h in headers %}
      {"data": "{{h}}"},
      {% end %}
    ],
    'aoColumnDefs': [
      { 'mRender': render_checkbox, 'mData': 2, 'aTargets': [ 0 ] }
    ],
    'ajax':{
      "url": '/admin/purge_usersAjax/',
      "dataSrc": ''
    }
  });
});
</script>
{%end%}
{%block content%}
Listing all users that are not yet validated but registered more than 30 days ago.
<div class='row' style="margin-top:15px">
  <div class='col-lg-12'>
    <input type=button onclick="checkbox_action('check')"  class="btn btn-xs btn-info" value="Select All"> | <input type=button onclick="checkbox_action('uncheck')"  class="btn btn-xs btn-info" value="Select None"> | <input type=button onclick="checkbox_action('inverse')"  class="btn btn-xs btn-info" value="Select Inverse"><br/>
    <table id="info-table" class="table">
      <thead>
        <tr>
          <td>Select</td>
          {% for head in headers %}
            <td>{{head}}</td>
          {% end %}
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<div class="row bottomfloat" style="background-color: #FFF;">
  <div class='col-lg-12' style="background-color: #FFF;">
    <form role="form" id="user-form">
      <input type="hidden" name="action" id="action" value="">
      <input type="button" id="remove-button" value="Remove Users from Qiita Database" class="btn btn-sm btn-danger" onclick="check_submit('Remove')">
    </form>
  </div>
</div>
{% end %}