{% 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="netif_edit_form" class="form-horizontal bootstrap-validator-form" action="" method="post" novalidate="novalidate">
          {% csrf_token %}
          <div class="panel">
              <div class="panel-heading">
                  <h1 class="panel-title"><i class="fa fa-sitemap">&nbsp;</i>{% translate "Network" %}</h1>
              </div>
              <div class="panel-body">
                <div class="row">
                  <div class="col-md-12">
                      <div class="form-group">
                        <label class="col-sm-4 control-label">{% translate "Friendly name" %}</label>
                        <div class="col-sm-5">
                          {{form.name}}
                          {{form.name.errors}}
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-4 control-label">{{form.type.label}}</label>
                        <div class="col-sm-5">
                          {{form.type}}
                          {{form.type.errors}}
                        </div>
                      </div>
                      {{form.iface_id.as_hidden}}
                      <div class="form-group" id="device_selector">
                        <label class="col-sm-4 control-label">{% translate "Network Interface Card(s)" %}</label>
                        <div class="col-sm-5">
                          {{form.nic}}
                          {{form.nic.errors}}
                        </div>
                      </div>
                      <div class="form-group" id="carp_info">
                        <label class="col-sm-4 control-label">{% translate "CARP vhid" %}</label>
                        <div class="col-sm-5">
                          {{form.carp_vhid}}
                          {{form.carp_vhid.errors}}
                        </div>
                        <div class="form-group" id="container_carp"></div>
                      </div>

                      <div class="form-group">
                        <label class="col-sm-4 control-label">{% translate "IP Address" %}</label>
                        <div class="col-sm-5">
                          {{form.ip}}
                          {{form.ip.errors}}
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-4 control-label">{% translate "Netmask / Prefix" %}</label>
                        <div class="col-sm-5">
                          {{form.prefix_or_netmask}}
                          {{form.prefix_or_netmask.errors}}
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-4 control-label">{% translate "Network fib" %}</label>
                        <div class="col-sm-5">
                          {{form.fib}}
                          {{form.fib.errors}}
                        </div>
                      </div>
                      <div class="form-group vlan_parameters">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Vlan ID" %}</label>
                          <div class="col-sm-5">
                            {{form.vlan}}
                            {{form.vlan.errors}}
                          </div>
                        </div>
                      </div>
                      <div class="form-group lagg_parameters">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "LAGG protocol" %}</label>
                          <div class="col-sm-5">
                            {{form.lagg_proto}}
                            {{form.lagg_proto.errors}}
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
              <div class="panel-footer">
                <a type="button" href="{% url 'system.netif.list' %}" class="btn btn-flat btn-default">{% translate "Cancel" %}</a>
                <button type="submit" class="btn btn-info btn-flat pull-right">{% translate "Submit" %}</button>
              </div>
            </div>
        </form>
      </div>
    </div>
  </section>

{% endblock %}

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

  var require_carp_vhid = false;

  function show_or_hide_carp_params(){
    var current_type = $('#id_type').val();
    var nics = $('#id_nic').val();
    var vhid = $('#id_carp_vhid').val();

    if(vhid != "0") {
      $('#carp_info').show();
    } else if(nics && nics.length > 1 && current_type === "alias") {
      require_carp_vhid = true;
      $('#carp_info').show();
    } else {
      require_carp_vhid = false;
      $('#carp_info').hide();
    }
  }

  $(function() {
    $('.select2').select2();

    show_or_hide_carp_params();

    $('#id_nic').on('change', function(e){
      //$('#id_nic').select2('destroy');

      var val = $(this).val();
      var current_type = $('#id_type').val();

      $('#id_nic option').each(function(){
        $(this).prop('disabled', false);
      });

      if (val === null){
        $('.select2').select2();
        return;
      }

      show_or_hide_carp_params();

      var ids = [];
      var node_names = [];
      var interface_names = [];
      $("#id_nic option:selected").each(function(){
        $(this).prop('disabled', false);

        ids.push($(this).val());
        node_names.push($(this).text().split(' - ')[1]);
        interface_names.push($(this).text().split(' - ')[0]);
      })

      $('#id_nic option').each(function(){
        if ($.inArray($(this).val(), ids) === -1){
          $(this).prop('disabled', false);

          // Disable interfaces on the same node for alias/vlan interfaces (CARP only allowed)
          if (["alias", "vlan"].includes(current_type)) {
            for (var i in node_names){
              if ($(this).text().endsWith(node_names[i])){
                $(this).prop('disabled', true);
              }
            }
          } else if (current_type === "lagg") {
            for (var i in node_names){
              if (!$(this).text().endsWith(node_names[i])){
                $(this).prop('disabled', true);
              }
            }
          } else {
            $(this).prop('disabled', true);
          }
        }
      })

      $('.select2').select2();
    }).trigger('change')

    $('#id_type').on('change', function(e){
      var current_type = $('#id_type').val();
      $('.vlan_parameters').hide();
      $('.lagg_parameters').hide();

      if(current_type === "vlan") {
        $('.vlan_parameters').show();
      }
      if(current_type === "lagg") {
        $('.lagg_parameters').show();
      }

    }).trigger('change')

    $('#netif_edit_form').on('submit', function(e){
      PNotify().removeAll()
      e.preventDefault();
      if (require_carp_vhid && $('#id_carp_vhid').val() === "0"){
        notify('error', gettext('Error'), gettext('Define a VHID > 0 for a CARP network address'))
        return false;
      }

      return true;
    })
  });



{% endblock %}