{% 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 "Node settings" %}</h1>
            </div>
            <div class="panel-body">
              {# 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 class="pull-left header"><i class="fa fa-inbox"></i>Configuration error</li>
                  </ul>
                  <div class="tab-content no-padding">
                    <pre class="console-type">{{ save_error }}</pre>
                  </div>
                </div>
              {% endif %}
              {# 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 %}
              <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 "Main settings" %}</a></li>
                  <li><a href="#tab_network" data-toggle="tab">{% translate "Network" %}</a></li>
                  <li><a href="#tab_firewall" data-toggle="tab">{% translate "Firewall" %}</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">{% translate "Hostname" %}</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.pstats_forwarders.label}}</label>
                          <div class="col-sm-5">
                            {{form.pstats_forwarders}}
                            {{form.pstats_forwarders.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                  </div> <!-- /.tab-pane -->
                  <div class="tab-pane" id="tab_network">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Internet IP Address" %}</label>
                          <div class="col-sm-5">
                          {{form.internet_ip}}
                          {{form.internet_ip.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">{% translate "InterCluster IP Address" %}</label>
                          <div class="col-sm-5">
                          {{form.management_ip}}
                          {{form.management_ip.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">{% translate "Backends outgoing IP Address masquerading" %}</label>
                          <div class="col-sm-5">
                          {{form.backends_outgoing_ip}}
                          {{form.backends_outgoing_ip.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">{% translate "Log forwarders IP Address masquerading" %}</label>
                          <div class="col-sm-5">
                          {{form.logom_outgoing_ip}}
                          {{form.logom_outgoing_ip.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">{% translate "Default router" %}</label>
                          <div class="col-sm-5">
                          {{form.gateway}}
                          {{form.gateway.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">{% translate "Default IPV6 router" %}</label>
                          <div class="col-sm-5">
                          {{form.gateway_ipv6}}
                          {{form.gateway_ipv6.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">{% translate "Static network routes" %}</label>
                          <div class="col-sm-5">
                          {{form.static_routes}}
                          {{form.static_routes.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">{% translate "Scanner IP Address" %}</label>
                          <div class="col-sm-5">
                          {{form.scanner_ip}}
                          {{form.scanner_ip.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                  </div> <!-- /.tab-pane -->
                  <div class="tab-pane" id="tab_firewall">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Max. entries for PF state table" %}</label>
                          <div class="col-sm-5">
                          {{form.pf_limit_states}}
                          {{form.pf_limit_states.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">{% translate "Max. entries for PF packet reassembly" %}</label>
                          <div class="col-sm-5">
                          {{form.pf_limit_frags}}
                          {{form.pf_limit_frags.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">{% translate "Max. entries for PF source tracking" %}</label>
                          <div class="col-sm-5">
                          {{form.pf_limit_src}}
                          {{form.pf_limit_src.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.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=".browsers-compat">
                          <i class="fa fa-plus"></i> {% translate "Advanced" %}
                        </button>
                      </div>
                    </div>
                    <div class="row collapse browsers-compat">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Custom PF initial parameters configuration" %}</label>
                          <div class="col-sm-5">
                          {{form.pf_custom_param_config}}
                          {{form.pf_custom_param_config.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                    <div class="row collapse browsers-compat">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Custom PF NAT Configuration" %}</label>
                          <div class="col-sm-5">
                          {{form.pf_custom_nat_config}}
                          {{form.pf_custom_nat_config.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                    <div class="row collapse browsers-compat">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Custom PF RDR Configuration" %}</label>
                          <div class="col-sm-5">
                          {{form.pf_custom_rdr_config}}
                          {{form.pf_custom_rdr_config.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                    <div class="row collapse browsers-compat">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Custom PF Configuration" %}</label>
                          <div class="col-sm-5">
                          {{form.pf_custom_config}}
                          {{form.pf_custom_config.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                  </div> <!-- /.tab-pane -->
                </div> <!-- /.tab-content -->
              </div> <!-- /.nav-tabs-custom -->
            </div> <!-- /.box-body -->
            <div class="panel-footer">
            <a href="{% url 'system.cluster.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> <!-- /.box-footer -->
          </div> <!-- /.box -->
        </form>
      </div>
    </div>
  </section>

{% endblock %}

{% block jquery_code %}

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

        $('#id_nic').change(function(e) {

            {{ nic_map_js|safe }}

            var selected = $(this).val();
            if (! selected) {
                $("#carp_info").hide();
                return;
            }
            nb_nic = selected.length;

            //This is a CARP configuration
            if (nb_nic > 1) {
                $("#carp_info").show();
            }
            else {
                $("#carp_info").hide();
            }

        });

        $('#id_nic').trigger('change');
    });

{% endblock %}