{% 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="tls_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 "TLS Profile" %}</h1>
            </div>
            <div class="panel-body">
              {# 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>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="tab_2">
                      <pre>{{ save_error.1 }}</pre>
                    </div>
                    <!-- /.tab-pane -->
                  </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 "General" %}</a></li>
                  <li><a href="#tab_server" data-toggle="tab">{% translate "TLS Server options" %}</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 "Friendly name" %}</label>
                            <div class="col-sm-5">
                              {{form.name}}
                              {{form.name.errors|safe}}
                            </div>
                          </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{form.x509_certificate.label}}</label>
                          <div class="col-sm-5">
                              {{form.x509_certificate}}
                              {{form.x509_certificate.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{form.verify_client.label}}</label>
                          <div class="col-sm-5">
                            {{form.verify_client}}
                            {{form.verify_client.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group require-cert">
                          <label class="col-sm-4 control-label">{{form.ca_cert.label}}</label>
                          <div class="col-sm-5">
                            {{form.ca_cert}}
                            {{form.ca_cert.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> <!-- /.tab-pane tab_general -->
                  <div class="tab-pane" id="tab_server">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Browsers compatibility" %}</label>
                          <div class="col-sm-5">
                            {{form.compatibility}}
                            {{form.compatibility.errors|safe}}
                          </div>
                          <button class="btn btn-box-tool" type="button" data-toggle="collapse" data-target=".browsers-compat">
                            <i class="fa fa-plus"></i> Advanced
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group browsers-compat collapse">
                          <label class="col-sm-4 control-label">{% translate "Allowed cipher protocols" %}</label>
                          <div class="col-sm-5">
                            {{form.protocols}}
                            {{form.protocols.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group browsers-compat collapse">
                          <label class="col-sm-4 control-label">{% translate "Allowed ciphers" %}</label>
                          <div class="col-sm-5">
                            {{form.cipher_suite}}
                            {{form.cipher_suite.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Advertise protocol list" %}</label>
                          <div class="col-sm-5">
                            {{form.alpn}}
                            {{form.alpn.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> <!-- /.tab-pane tab_server -->
                </div>
              </div>
            </div>
            <div class="panel-footer">
              <a type="button" href="{% url 'system.tls_profile.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;
    };
  }

  $(function() {

    var cipher_choices = {{ cipher_choices|safe }};
    var protocols_handler = {{ protocols_handler|safe }};

    $('.select2').select2();

    /* If browsers compatibility is not custom,
     * hide and disable protocol choice and ciphers area
     * Else show and enable those fields */
    $('#id_compatibility').on('change', function(e) {
      var value = $(this).val();

      if( value !== "custom" ) {
        $('#id_protocols').val(protocols_handler[value].split(',')).trigger('change.select2');
        $('#id_cipher_suite').val(cipher_choices[value]);
        $('#id_protocols').select2({disabled: true});
        $('#id_cipher_suite').prop("readonly", true);
      } else {
        $('#id_protocols').select2({disabled: false});
        $('#id_cipher_suite').prop("readonly", false);
        $('.browsers-compat').show();
      }
    });
    $('#id_compatibility').trigger('change');

    /* If verify client is none, show CA cert input area
     *  else hide it */
    $('#id_verify_client').on('change', function(e) {
      var value = $(this).val();

      if( value !== "none" ) {
        $('.require-cert').show();
      } else {
        $('.require-cert').hide();
      }
    });
    $('#id_verify_client').trigger('change');

    /* Enable protocols choice just before form submit */
    $('#tls_edit_form').on('submit', function(e) {
      $('#id_protocols').prop({disabled: false});
    });

  }); // end of function()

{% endblock %}