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

{% block css_include %}

{% endblock %}

{% block js_include %}

{% endblock %}


{% block content %}

  <!-- Main content -->
  <section class="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 'system.netif.edit' %}"><i class="fa fa-plus-circle">&nbsp;</i>{% translate "Add an entry" %}</a>
                        <a class="btn btn-flat btn-secondary" href="{% url 'system.netif.refresh' %}"><i class="fas fa-sync-alt">&nbsp;</i>{% translate "Refresh NIC" %}</a>
                    </div>
                    <h1 class="panel-title"><i class="fa fa-at">&nbsp;</i>{% translate "Network" %}</h1>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="interface_list">
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
        </div>
    </div>
  </section>

{% endblock %}

{% block jquery_code %}

   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 "Type" %}',
      name: "type", aTargets: [2],
      defaultContent: "",
      mData: "type"
    },
    {
      sTitle: '{% translate "NIC" %}',
      name: "nic", aTargets: [3],
      defaultContent: "",
      sWidth: "20%",
      mData: "nic"
    },
    {
      sTitle: '{% translate "IP Address" %}',
      name: "ip", aTargets: [4],
      defaultContent: "",
      mData: "ip"
    },
    {
      sTitle: '{% translate "Netmask or prefix" %}',
      name: "prefix_or_netmask", aTargets: [5],
      defaultContent: "",
      mData: "prefix_or_netmask"
    },
    {
      sTitle: '{% translate "CARP vhid" %}',
      name: "carp_vhid", aTargets: [6],
      defaultContent: "",
      mData: "carp_vhid",
      mRender: function(data, type, row) {
        if (data > 0) {
            return data;
        }
        else {
            return "Disabled";
        }
      }
    },
    {
      sTitle: '{% translate "VLAN" %}',
      name: "vlan", aTargets: [7],
      defaultContent: "",
      mData: "vlan",
      mRender: function(data, type, row) {
        if (data > 0) {
            return data;
        }
        else {
            return "Disabled";
        }
      }
    },
    {
      sTitle: '{% translate "Action" %}',
      mData:"id",
      aTargets: [8],
      defaultContent: "",
      mRender: function(data, type, row) {
        if (row.type === "system") {
            return '';
        }
        else {
            return '<a class="btn btn-flat btn-xs btn-danger" href="/system/netif/delete/' + data + '"><span><i class="fas fa-trash-alt"></i></span></a>';
        }
      }
    }
  ];

  var netif_table = $("#interface_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){
          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 (check_json_error(data))
              fnCallback(data);
          }
        })
      },
      fnCreatedRow: function(nRow, aData, iDataIndex){
        /* Events binding to edit a netif */
        $(nRow).on('click', 'td', function(e) {
          if (e.target.tagName !== "TD") return;
          const url = "{% url 'system.netif.edit' %}" + aData.id
          /* Open a netif edition in a new tab with ctrl click */
          if (e.ctrlKey || e.metaKey) {
            window.open(url, '_blank');
          } else {
            window.location.href = url;
          }
        }); // /$(nRow).on('click', 'td'

        /* Open a netif edition in a new tab with middle click */
        $(nRow).on('mousedown', 'td', function(e){
          if (e.target.tagName === "TD" && e.button === 1) {
            window.open("{% url 'system.netif.edit' %}" + aData.id, '_blank');
          }
        }); // /$(nRow).on('mousedown', 'td'
      }
  });

{% endblock %}