{% 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 "X509 Certificate" %}</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 "Certificate type" %}</label>
                        <div class="col-sm-5">
                         <div class="col-sm-5">
                          {{form.type}}
                          {{form.type.errors|safe}}
                        </div>
                        </div>
                      </div>
                      <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 class="form-group internal">
                        <label class="col-sm-4 control-label">{% translate "Common name" %}</label>
                        <div class="col-sm-5">
                          {{form.cn}}
                          {{form.cn.errors|safe}}
                        </div>
                      </div>
                          <div class="form-group external">
                            <label class="col-sm-4 control-label">{% translate "PEM Certificate" %}</label>
                            <div class="col-sm-5">
                              {{form.cert}}
                              {{form.cert.errors|safe}}
                            </div>
                          </div>
                          <div class="form-group external">
                            <label class="col-sm-4 control-label">{% translate "PEM Private Key" %}</label>
                            <div class="col-sm-5">
                              {{form.key}}
                              {{form.key.errors|safe}}
                            </div>
                          </div>
                          <div class="form-group external">
                            <label class="col-sm-4 control-label">{% translate "PEM Certificate Chain" %}</label>
                            <div class="col-sm-5">
                              {{form.chain}}
                              {{form.chain.errors|safe}}
                            </div>
                          </div>
                          <div class="form-group external">
                            <label class="col-sm-4 control-label">{% translate "PEM CRL (optional)" %}</label>
                            <div class="col-sm-5">
                              {{form.crl}}
                              {{form.crl.errors|safe}}
                            </div>
                          </div>
                          <div class="form-group external">
                            <label class="col-sm-4 control-label">{% translate "URI to fetch CRL (optional)" %}</label>
                            <div class="col-sm-5">
                              {{form.crl_uri}}
                              {{form.crl_uri.errors|safe}}
                            </div>
                          </div>

                  </div>
                </div>
              </div>
              <div class="panel-footer">
                <a type="button" href="{% url 'system.pki.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 %}
    $(function() {

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

        $('#id_type').on('change', function(e){
            var val = $(this).val();

            if (val == "internal" || val=="letsencrypt") {
                $('.internal').show();
                $('.external').hide();
            }
            else if (val == "external") {
                $('.internal').hide();
                $('.external').show();
            }
        })

        $('#id_type').trigger('change');

    });

{% endblock %}