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

{% block css_include %}
{% endblock %}

{% block js_include %}
{% endblock %}


{% block content %}

  <div class="row">
      <div class="col-md-12">
          <div class="panel">
              <div class="panel-heading">
                  <div class="panel-control">
                    <a class="btn btn-flat btn-primary" href="{% url 'darwin.policy.edit' %}"><i class="fa fa-plus-circle">&nbsp;</i>{% translate "Add an entry" %}</a>
                  </div>
                  <h1 class="panel-title"><i class="fa fa-sitemap">&nbsp;</i>{% translate "Darwin Security Policies" %}</h1>
              </div>
              <div class="panel-body">
                <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="policy_list">
                </table>
              </div>
          </div>
      </div>
  </div>

{% endblock %}

{% block jquery_code %}

  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });

  var aoColumns = [
    {
      sTitle: "ID",
      name: "id",
      aTargets: [0],
      defaultContent: "",
      mData: "id",
      bVisible: false,
    },
    {
      sTitle: '{% translate "Name" %}',
      name: "name",
      aTargets: [1],
      defaultContent: "",
      mData: "name"
    },
    {
      sTitle: '{% translate "Description" %}',
      name: "description",
      aTargets: [2],
      defaultContent: "",
      mData: "description"
    },
    {
      sTitle: '{% translate "Inputs" %}',
      name: "inputs",
      aTargets: [3],
      defaultContent: "",
      mData: "inputs",
      mRender: function(data, type, row) {
        var result = "<ul>";
        for( l of data )
          result += "<li>" + l + "</li>";
        return result + "</ul>";
      }
    },
    {
      sTitle: '{% translate "Status" %}',
      defaultContent: "",
      name: "status",
      mData: "status",
      aTargets: [4],
      bSearchable: false,
      mRender: function(data, type, row) {
        var cpt = 0;
        var result = "<ul>";
        data.forEach(function(filter) {
          $.each(filter, function(fname, statuses) {
            if( !jQuery.isEmptyObject(statuses) ){
              var status_list = "";
              $.each(statuses, function(node, status) {
                var status_render = "";
                switch( status ) {
                  case "RUNNING":
                    status_render = '<img width="16" height="16" src="{% static 'img/status_green.png' %}" class="img_responsive"/>&nbsp;';
                    break;
                  case "DOWN":
                  case "DISABLED":
                    status_render = '<img width="16" height="16" src="{% static 'img/status_grey.png' %}" class="img_responsive"/>&nbsp;';
                    break;
                  case "ERROR":
                    status_render = '<img width="16" height="16" src="{% static 'img/status_red.png' %}" class="img_responsive"/>&nbsp;';
                    break;
                  case "STARTING":
                  case "CONFIGURING":
                  case "STOPPING":
                    status_render = '<i class="icon fa fa-spinner fa-spin"></i>&nbsp;';
                    break;
                }
                if (status_render.length > 0) {
                  if (status_list.length === 0) {
                    status_list += "<li>" + fname + '<ul id="ul_policy">';
                  }
                  status_list += '<li>' + status_render + node + '</li>';
                }
              });
              if (status_list.length > 0)
                status_list += '</ul></li>';
              result += status_list;
            }
            cpt++;
          });
        });
        result += "</ul>";
        return result;
      }
    },
    {
      sTitle: '{% translate "Action" %}',
      mData:"id",
      aTargets: [5],
      defaultContent: "",
      sWidth: "5%",
      mRender: function(data, type, row) {
        return '<a class="btn btn-flat btn-xs btn-primary" data-toggle="tooltip" data-placement="top" title="Copy" href="/darwin/policy/clone/' + data + '"><span><i class="fa fa-copy"></i></span></a>' +
        '&nbsp;<a class="btn btn-flat btn-xs btn-danger" data-toggle="tooltip" data-placement="top" title="Delete" href="/darwin/policy/delete/' + data + '"><span><i class="fas fa-trash-alt"></i></span></a>';
      }
    }
  ];

  var policy_table = $("#policy_list").dataTable({
    bServerSide   : true,
    order         : [[1, 'desc']],
    iDisplayLength: 10,
    bProcessing   : true,
    bSort         : true,
    sAjaxSource   : '',
    sServerMethod : 'POST',
    aoColumnDefs: aoColumns,
    language: language_datatable,
    fnServerData  : function(sSource, aoData, fnCallback){

      var columns = [];
      for (var i in aoColumns){
        if( aoColumns[i].bSearchable !== false && aoColumns[i].mData !== null )
          columns.push(aoColumns[i].mData);
      }

      aoData.push({
        name: 'columns',
        value: JSON.stringify(columns)
      });

      $.ajax({
        type   : "POST",
        url    : sSource,
        data   : aoData,
        success: function(data, callback){
          if (!data.status){
            notify('error', "{% translate 'Error' %}", data.error);
          } else {
            fnCallback(data);
          }
        }
      }) // /$.ajax
      .fail( function( jqXHR, textStatus ) {
        notify('error', "{% translate 'Error' %}", jqXHR.responseText);
      }) // /$.fail
      .done( function( data ) {
        if (!data.status){
          notify('error', "{% translate 'Error' %}", data.error);
        } else {
          fnCallback(data);
        }
      }); // /$.done
    }, // /fnServerData

    fnCreatedRow: function(nRow, aData, iDataIndex){

      /* Events binding to edit a template */
      $(nRow).on('click', function(e){
          var id = aData['id'];
          window.location.href = "/darwin/policy/edit/" + id;
      });
    }
  });

  /* Reload table data every 5 seconds */
  setInterval( function() {
    policy_table.fnDraw(false);
  }, 5000);

{% endblock %}