{% 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">
        {# 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 %}
        {# 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><a href="#tab_2" data-toggle="tab">{% translate "Advanced informations" %}</a></li>
              <li class="active"><a href="#tab_1" data-toggle="tab">{% translate "Message" %}</a></li>
              <li class="pull-left header"><i class="fa fa-inbox"></i>{% translate "Configuration error" %}</li>
            </ul>
            <div class="tab-content no-padding">
              <div class="tab-pane active" id="tab_1">
                <pre>{{ save_error.0 }}</pre>
              </div>
              <div class="tab-pane" id="tab_2">
                <pre>{{ save_error.1 }}</pre>
              </div>
            </div>
          </div> <!-- /.alert -->
        {% endif %}
        <form id="openvpn_edit_form" class="form-horizontal bootstrap-validator-form" action="" method="post" novalidate="novalidate">
          {% csrf_token %}
          <div class="panel">
            <div class="panel-body">
              <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab_general" data-toggle="tab">{% translate "General" %}</a></li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane active" id="tab_general">
                    <br/>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Enable VPNSSL" %}</label>
                          <div class="col-sm-5">
                            {{form.enabled}}
                            {{form.enabled.errors|safe}}
                          </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label"> {% translate "Apply settings to node" %}</label>
                            <div class="col-sm-5">
                            <label>
                                {{form.node}}
                                {{form.node.errors|safe}}
                            </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Protocol" %}</label>
                            <div class="col-sm-5">
                                {{form.proto}}
                                {{form.proto.errors|safe}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Remote server" %}</label>
                            <div class="col-sm-5">
                                {{form.remote_server}}
                                {{form.remote_server.errors|safe}}
                            </div>
                        </div>
                        <div class="form-group hideikelifetime">
                                <label class="col-sm-4 control-label">{% translate "Remote port" %}</label>
                                <div class="col-sm-5">
                                    {{form.remote_port}}
                                    {{form.remote_port.errors|safe}}
                                </div>
                        </div>
                        <div class="form-group hideikelifetime">
                          <label class="col-sm-4 control-label">{% translate "TLS Profile for authentication" %}</label>
                          <div class="col-sm-5">
                              {{form.tls_profile}}
                              {{form.tls_profile.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                  </div> <!-- /.tab-pane -->
                </div> <!-- /.tab-content -->
              </div> <!-- /.nav-tabs-custom -->
            </div>
            <div class="panel-footer">
              <a type="button" href="{% url 'services.openvpn.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> <!-- /.col-md-12 -->
    </div> <!-- /.row -->
  </section> <!-- /.content -->

{% endblock %}

{% block jquery_code %}

    /* Switchery mandatory code */
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
      elems.forEach(function(html) {
      var switchery = new Switchery(html, {
        'color': '#FA9834',
      });
    });

    /* Initialise tag-editor objects */
    $(".tag-editor").tagEditor({
      delimiter: ','
    });

    /* Initialise select2 objects */
    $('.select2').select2();

    $('.link-tab').click(function(){
      window.location.href = ($(this).attr('href'));
    });

{% endblock %}