{% extends "layout2.html" %}
{% load i18n %}
{% load static %}

{% block css_include %}

{% endblock %}

{% block js_include %}
  <script src="{% static 'js/listener.js' %}"></script>
{% endblock %}

{% block content %}

  <section class="content">
    <form id="frontend_edit_form" class="form-horizontal bootstrap-validator-form" action="{% url 'services.frontend.edit' object_id %}" method="post" novalidate="novalidate">
      {% csrf_token %}
      <div class="row">
        <div class="col-md-12">
          {% if save_error or form.non_field_errors %}
          <div class="panel panel-danger">
            <div class="panel-heading">
              {# If there is save/configuration errors #}
              {% if save_error %}
                <ul class="nav nav-tabs pull-right ui-sortable-handle">
                  <li class="active"><a href="#tab_1" data-toggle="tab">{% translate "Message" %}</a></li>
                  <li><a href="#tab_2" data-toggle="tab">{% translate "Advanced informations" %}</a></li>
                </ul>
                <h4 class="panel-title">{% translate "Configuration error" %}</h4>
              {% endif %}
              {% if form.non_field_errors %}
                <h4 class="panel-title"><i class="icon fa fa-ban"></i> {% translate "Form errors" %} </h4>
              {% endif %}
            </div>
            <div class="panel-body">
              {# Print form errors correctly #}
              {% if form.non_field_errors %}
                <div>
                  {{ form.non_field_errors|safe }}
                </div>
              {% endif %}
              {# If there is save/configuration errors #}
              {% if save_error %}
                <div>
                  <div class="tab-content no-padding">
                    <div class="tab-pane active" id="tab_1">
                      <pre class="console-type">{{ save_error.0 }}</pre>
                    </div>
                    <div class="tab-pane" id="tab_2">
                      <pre class="console-type">{{ save_error.1 }}</pre>
                    </div>
                  </div>
                </div>
              {% endif %}
            </div>
          </div>
          {% endif %}
          <div class="panel">
            <div class="panel-heading">
                <h1 class="panel-title"><i class="fa fa-sitemap">&nbsp;</i>{% translate "Listeners" %}</h1>
            </div>
            <div class="panel-body">
              <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_network" data-toggle="tab" class="network-mode">{% translate "Listeners" %}</a></li>
                  <li><a href="#tab_log_settings" data-toggle="tab" class="api-mode filebeat-mode">{% translate "LOG Settings" %}</a></li>
                  <li><a href="#tab_http" data-toggle="tab" class="http-mode">{% translate "HTTP Options" %}</a></li>
                  <li><a href="#tab_headers" data-toggle="tab" class="http-mode">{% translate "HTTP Headers" %}</a></li>
                  <li><a href="#tab_enrichment" data-toggle="tab" class="logging">{% translate "Logs Enrichment" %}</a></li>
                  <li><a href="#tab_logging" data-toggle="tab" class="logging">{% translate "Logs Forwarder" %}</a></li>
                  <li><a href="#tab_custom_rsyslog" data-toggle="tab" class="logging">{% translate "Custom operations" %}</a></li>
                  <li><a href="#tab_custom_haproxy" data-toggle="tab" class="haproxy-conf">{% translate "Custom conf" %}</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 "Enable listener" %}</label>
                          <div class="col-sm-5">
                            {{form.enabled}}
                            {{form.enabled.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 "Friendly name" %}</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">{% translate "Mode" %}</label>
                          <div class="col-sm-5">
                            {{form.mode}}
                            {{form.mode.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row -->
                    <div class="row http-mode tcp-mode log-mode filebeat-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Enable logging" %}</label>
                          <div class="col-sm-5">
                          {{form.enable_logging}}
                          {{form.enable_logging.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode tcp-mode log-mode filebeat-mode -->
                    <div class="row http-mode-logging">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Log level" %}</label>
                          <div class="col-sm-5">
                            {{form.log_level}}
                            {{form.log_level.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode-logging -->
                    <div class="row http-mode-logging tcp-mode-logging">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Store logs into cluster database" %}</label>
                          <div class="col-sm-5">
                            <input type="checkbox" class="js-switch" id="stock_logs_locally"/>
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode-logging -->
                    <div class="row logging">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Archive logs on system" %}</label>
                          <div class="col-sm-5">
                            <input type="checkbox" class="js-switch" id="archive_logs"/>
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row logging -->
                    <div class="row log-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Rsyslog Listening mode" %}</label>
                          <div class="col-sm-5">
                            {{form.listening_mode}}
                            {{form.listening_mode.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode -->
                    <div class="row filebeat-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Filebeat Module" %}</label>
                          <div class="col-sm-5">
                            {{form.filebeat_module}}
                            {{form.filebeat_module.errors|safe}}
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12" id="filebeat-input-div">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Filebeat Input" %}</label>
                          <div class="col-sm-5">
                            {{form.filebeat_listening_mode}}
                            {{form.filebeat_listening_mode.errors|safe}}
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Filebeat Configuration" %}</label>
                          <div class="col-sm-5">
                            {{form.filebeat_config}}
                            {{form.filebeat_config.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row filebeat-mode -->
                    <div class="row log-mode filebeat-mode" id="ruleset-div">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Input logs type" %}</label>
                          <div class="col-sm-5">
                            {{form.ruleset}}
                            {{form.ruleset.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode filebeat-mode -->
                    <div class="row log-mode filebeat-mode forwarder-tag">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.parser_tag.label }}</label>
                          <div class="col-sm-5">
                            {{form.parser_tag}}
                            {{form.parser_tag.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode filebeat-mode -->
                    <div class="row log-mode filebeat-mode" id="node-div">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.node.label }}</label>
                          <div class="col-sm-5">
                            {{form.node}}
                            {{form.node.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode filebeat-mode -->
                    <div class="row log-mode file-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.file_path.label }}</label>
                          <div class="col-sm-5">
                            {{form.file_path}}
                            {{form.file_path.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode -->
                    <div class="row log-mode kafka-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.kafka_brokers.label }}</label>
                          <div class="col-sm-5">
                            {{form.kafka_brokers}}
                            {{form.kafka_brokers.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode -->
                    <div class="row log-mode kafka-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.kafka_topic.label }}</label>
                          <div class="col-sm-5">
                            {{form.kafka_topic}}
                            {{form.kafka_topic.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode -->
                    <div class="row log-mode kafka-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.kafka_consumer_group.label }}</label>
                          <div class="col-sm-5">
                            {{form.kafka_consumer_group}}
                            {{form.kafka_consumer_group.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode -->
                    <div class="row log-mode kafka-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.kafka_options.label }}</label>
                          <div class="col-sm-5">
                            {{form.kafka_options}}
                            {{form.kafka_options.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row log-mode -->
                    <div class="row filebeat-mode redis-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">Use local Redis</label>
                          <div class="col-sm-5">
                            {{form.redis_use_local}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row filebeat-mode redis-mode -->
                    <div class="row filebeat-mode redis-mode redis-connect">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.redis_server.label }}</label>
                          <div class="col-sm-5">
                            {{form.redis_server}}
                            {{form.redis_server.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row filebeat-mode redis-mode redis-connect -->
                    <div class="row filebeat-mode redis-mode redis-connect">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.redis_port.label }}</label>
                          <div class="col-sm-5">
                            {{form.redis_port}}
                            {{form.redis_port.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row filebeat-mode redis-mode redis-connect -->
                    <div class="row filebeat-mode redis-mode redis-connect">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.tls_profile.label }}</label>
                          <div class="col-sm-5">
                            {{form.tls_profile}}
                            {{form.tls_profile.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row filebeat-mode redis-mode redis-connect -->
                    <div class="row redis-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.redis_mode.label }}</label>
                          <div class="col-sm-5">
                            {{form.redis_mode}}
                            {{form.redis_mode.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row redis-mode -->
                    <div class="row redis-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{ form.redis_key.label }}</label>
                          <div class="col-sm-5">
                            {{form.redis_key}}
                            {{form.redis_key.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row redis-mode -->
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Tags" %}</label>
                          <div class="col-sm-5">
                            {{form.tags}}
                            {{form.tags.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 "Darwin policies" %}</label>
                          <div class="col-sm-5">
                            {{form.darwin_policies}}
                            {{form.darwin_policies.errors|safe}}
                          </div>
                        </div>
                      </div>
                      <div class="darwin-mode">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Darwin mode" %}</label>
                            <div class="col-sm-5">
                              {{form.darwin_mode}}
                              {{form.darwin_mode.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row darwin-mode -->
                    </div> <!-- /.row -->
                    <!-- Advanced tab -->
                    <div class="row log-mode filebeat-mode">
                      <div class="col-sm-4 pull-right">
                        <div class="form-group">
                          <button class="btn btn-box-tool" type="button" data-toggle="collapse" data-target=".advanced_options">
                            <i class="fa fa-plus"></i> {% translate "Advanced" %}
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="form-group collapse advanced_options">
                      <div class="row filebeat-mode redis-mode redis-connect">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{{ form.redis_password.label }}</label>
                            <div class="col-sm-5">
                              {{form.redis_password}}
                              {{form.redis_password.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="row filebeat-mode redis-mode redis-queue-mode">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{{ form.redis_batch_size.label }}</label>
                            <div class="col-sm-5">
                              {{form.redis_batch_size}}
                              {{form.redis_batch_size.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="redis-settings">
                        <div class="row redis-mode redis-queue-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.redis_use_lpop.label }}</label>
                              <div class="col-sm-5">
                                {{form.redis_use_lpop}}
                                {{form.redis_use_lpop.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row redis-mode redis-stream-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.redis_stream_startID.label }}</label>
                              <div class="col-sm-5">
                                {{form.redis_stream_startID}}
                                {{form.redis_stream_startID.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row redis-mode redis-stream-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.redis_stream_consumerGroup.label }}</label>
                              <div class="col-sm-5">
                                {{form.redis_stream_consumerGroup}}
                                {{form.redis_stream_consumerGroup.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row redis-mode redis-stream-mode redis-consumer-group">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.redis_stream_consumerName.label }}</label>
                              <div class="col-sm-5">
                                {{form.redis_stream_consumerName}}
                                {{form.redis_stream_consumerName.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row redis-mode redis-stream-mode redis-consumer-group">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.redis_stream_acknowledge.label }}</label>
                              <div class="col-sm-5">
                                {{form.redis_stream_acknowledge}}
                                {{form.redis_stream_acknowledge.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row redis-mode redis-stream-mode redis-consumer-group">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{ form.redis_stream_reclaim_timeout.label }}</label>
                              <div class="col-sm-5">
                                {{form.redis_stream_reclaim_timeout}}
                                {{form.redis_stream_reclaim_timeout.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="row listening-tcp">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{{form.healthcheck_service.label}}</label>
                            <div class="col-sm-5">
                              {{form.healthcheck_service}}
                              {{form.healthcheck_service.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="row log-mode filebeat-mode">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Size of mmdblookup cache" %}</label>
                            <div class="col-sm-5">
                              {{form.mmdb_cache_size}}
                              {{form.mmdb_cache_size.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="row log-mode">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{{form.queue_type.label}}</label>
                            <div class="col-sm-5">
                              {{form.queue_type}}
                              {{form.queue_type.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="tab-queue">
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.queue_size.label}}</label>
                              <div class="col-sm-5">
                                {{form.queue_size}}
                                {{form.queue_size.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.dequeue_batch_size.label}}</label>
                              <div class="col-sm-5">
                                {{form.dequeue_batch_size}}
                                {{form.dequeue_batch_size.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.nb_workers.label}}</label>
                              <div class="col-sm-5">
                                {{form.nb_workers}}
                                {{form.nb_workers.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.new_worker_minimum_messages.label}}</label>
                              <div class="col-sm-5">
                                {{form.new_worker_minimum_messages}}
                                {{form.new_worker_minimum_messages.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.light_delay_mark.label}}</label>
                              <div class="col-sm-5">
                                {{form.light_delay_mark}}
                                {{form.light_delay_mark.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.full_delay_mark.label}}</label>
                              <div class="col-sm-5">
                                {{form.full_delay_mark}}
                                {{form.full_delay_mark.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.shutdown_timeout.label}}</label>
                              <div class="col-sm-5">
                                {{form.shutdown_timeout}}
                                {{form.shutdown_timeout.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row log-mode">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="col-sm-4 control-label">{{form.enable_disk_assist.label}}</label>
                              <div class="col-sm-5">
                                {{form.enable_disk_assist}}
                                {{form.enable_disk_assist.errors|safe}}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div id="tab-disk">
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.save_on_shutdown.label}}</label>
                                <div class="col-sm-5">
                                  {{form.save_on_shutdown}}
                                  {{form.save_on_shutdown.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.low_watermark.label}}</label>
                                <div class="col-sm-5">
                                  {{form.low_watermark}}
                                  {{form.low_watermark.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.high_watermark.label}}</label>
                                <div class="col-sm-5">
                                  {{form.high_watermark}}
                                  {{form.high_watermark.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.max_file_size.label}}</label>
                                <div class="col-sm-5">
                                  {{form.max_file_size}}
                                  {{form.max_file_size.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.max_disk_space.label}}</label>
                                <div class="col-sm-5">
                                  {{form.max_disk_space}}
                                  {{form.max_disk_space.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.checkpoint_interval.label}}</label>
                                <div class="col-sm-5">
                                  {{form.checkpoint_interval}}
                                  {{form.checkpoint_interval.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="row log-mode">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label class="col-sm-4 control-label">{{form.spool_directory.label}}</label>
                                <div class="col-sm-5">
                                  {{form.spool_directory}}
                                  {{form.spool_directory.errors|safe}}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div> <!-- /.tab-disk -->
                      </div> <!-- /.tab-queue -->
                      <div class="row log-mode listening-tcp">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Disable 'Octet-counted framing'" %}</label>
                            <div class="col-sm-5">
                              {{form.disable_octet_counting_framing}}
                              {{form.disable_octet_counting_framing.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row log-mode listening-tcp -->
                      <div class="row log-mode listening-tcp">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Additional Frame Delimiter (AddtlFrameDelimiter)" %}</label>
                            <div class="col-sm-5">
                              {{form.custom_tl_frame_delimiter}}
                              {{form.custom_tl_frame_delimiter.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row log-mode listening-tcp -->
                      <div class="row log-mode listening-tcp">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Rate-limiting interval" %}</label>
                            <div class="col-sm-5">
                              {{form.ratelimit_interval}}
                              {{form.ratelimit_interval.errors|safe}}
                            </div>
                            <div class="col-sm-2">
                              {% translate " s" %}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row log-mode listening-tcp -->
                      <div class="row log-mode listening-tcp">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Rate-limiting burst" %}</label>
                            <div class="col-sm-5">
                              {{form.ratelimit_burst}}
                              {{form.ratelimit_burst.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row log-mode listening-tcp -->
                      <div class="row log-mode filebeat-mode">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{{form.expected_timezone.label}}</label>
                            <div class="col-sm-5">
                              {{form.expected_timezone}}
                              {{form.expected_timezone.errors|safe}}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row log-mode filebeat-mode -->
                    </div> <!-- /advanced_options -->
                  </div> <!-- /.tab-pane tab_general -->
                  <div class="tab-pane" id="tab_network">

                    <div class="panel-heading">
                      <div class="panel-control">
                        <a class="btn btn-flat btn-primary" id="add_listener"><i class="fa fa-plus-circle">&nbsp;</i>Add an entry</a>
                      </div>
                    </div>
                    <div class="row http-mode tcp-mode log-mode filebeat-mode">
                      <div class="col-md-12">
                        <table id="listener_table" class="table table-striped table-bordered table-hover dt-responsive nowrap table-datatable">
                          <!-- Here are the attributes of Listener class -->
                          <thead>
                            <tr>
                              <th style="visibility:hidden;">Id</th>
                              <th>{% translate "Listen Address(es)" %}</th>
                              <th>{% translate "Port" %}</th>
                              <th>{% translate "TLS Profile" %}</th>
                              <th>{% translate "Allow from" %}</th>
                              <th>{% translate "Max src" %}</th>
                              <th>{% translate "Max rate" %}</th>
                              <th>{% translate "Delete" %}</th>
                            </tr>
                          </thead>
                          <tbody>
                            {% for l in listeners %}
                              {{ l.as_table_td|safe }}
                            {% endfor %}
                          </tbody>
                        </table>
                        {{ form.listeners.errors|safe }}
                        <input id="listeners" name="listeners" value="" type="hidden">
                      </div>
                    </div>

                    <fieldset class="col-lg-12 sol-sm-12 haproxy-conf">
                      <legend>{% translate "Timeout options" %}</legend>
                      <div class="row tcp-mode haproxy-conf">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{% translate "Timeout client" %}</label>
                            <div class="col-sm-5">
                              {{form.timeout_client}}
                              {{form.timeout_client.errors|safe}}
                            </div>
                            <div class="col-sm-2">
                              {% translate " s" %}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row -->
                      <div class="row http-mode">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="col-sm-4 control-label">{{form.timeout_keep_alive.label}}</label>
                            <div class="col-sm-5">
                              {{form.timeout_keep_alive}}
                              {{form.timeout_keep_alive.errors|safe}}
                            </div>
                            <div class="col-sm-2">
                              {% translate " ms" %}
                            </div>
                          </div>
                        </div>
                      </div> <!-- /.row -->
                    </fieldset>
                  </div> <!-- /.tab-pane tab_network -->
                  <div class="tab-pane" id="tab_http">
                    <div class="row http-mode">
                     <div class="col-md-12">
                      <div class="form-group">
                        <label class="col-sm-4 control-label">{{form.https_redirect.label}}</label>
                        <div class="col-md-5">
                          {{form.https_redirect}}
                          {{form.https_redirect.errors|safe}}
                        </div>
                      </div>
                     </div>
                    </div>
                    <div class="row http-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Enable cache" %}</label>
                          <div class="col-sm-5">
                            {{form.enable_cache}}
                            {{form.enable_cache.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode -->
                    <div class="row http-mode cache">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Cache total max size (Mb)" %}</label>
                          <div class="col-sm-5">
                            {{form.cache_total_max_size}}
                            {{form.cache_total_max_size.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode cache -->
                    <div class="row http-mode cache">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Cache max age (seconds)" %}</label>
                          <div class="col-sm-5">
                            {{form.cache_max_age}}
                            {{form.cache_max_age.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode cache -->
                    <div class="row http-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Enable compression" %}</label>
                          <div class="col-sm-5">
                            {{form.enable_compression}}
                            {{form.enable_compression.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode -->
                    <div class="row http-mode compression">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Supported compression algorithms" %}</label>
                          <div class="col-sm-5">
                            {{form.compression_algos}}
                            {{form.compression_algos.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode compression -->
                    <div class="row http-mode compression">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "MIME types compressed" %}</label>
                          <div class="col-sm-5">
                            {{form.compression_mime_types}}
                            {{form.compression_mime_types.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode compression -->
                    <div class="row http-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Error template" %}</label>
                          <div class="col-sm-5">
                            {{form.error_template}}
                            {{form.error_template.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row http-mode -->
                  </div> <!-- /.tab-pane tab_http -->
                  <div class="tab-pane" id="tab_headers">
                    <div class="row http-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Headers" %}</label>
                        </div>
                        <table id="header_table" class="table table-striped table-bordered table-hover dt-responsive nowrap table-datatable">
                          <thead>
                            {{header_form.as_table_headers|safe}}
                          </thead>
                          <tbody>
                            {% for h in headers %}
                              {{ h.as_table_td|safe }}
                            {% endfor %}
                          </tbody>
                        </table>
                        <div style="text-align:right;margin-top:10px;">
                          <div class="add-group">
                            <button class="addplus addlink" id="add_header" type="button">{% translate "Add an Entry" %}</button>
                          </div>
                        </div>
                        {{ form.headers.errors|safe }}
                        <input id="headers" name="headers" value="" type="hidden">
                      </div>
                    </div>
                  </div> <!-- /.tab-pane tab_headers -->
                  <div class="tab-pane" id="tab_logging">
                    <div class="row logging">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{form.log_forwarders.label}}</label>
                          <div class="col-sm-5">
                            {{form.log_forwarders}}
                            {{form.log_forwarders.errors|safe}}
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12 log-failure">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{{form.log_forwarders_parse_failure.label}}</label>
                          <div class="col-sm-5">
                            {{form.log_forwarders_parse_failure}}
                            {{form.log_forwarders_parse_failure.errors|safe}}
                          </div>
                        </div>
                      </div>
                      <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> <!-- /.row logging -->
                    <div class="row logging">
                      <div class="col-md-12 log-parser-json">
                        <div class="form-group collapse browsers-compat">
                          <legend>{% translate "Rename fields (only on json source)" %}</legend>
                          <table id="keep_source_fields_table" class="table table-striped table-bordered table-hover dt-responsive nowrap table-datatable">
                            <!-- Here are the attributes of Listener class -->
                            <thead>
                              <tr>
                                <th>{% translate "Origin field" %}</th>
                                <th>{% translate "New field" %}</th>
                                <th>{% translate "Keep source" %}</th>
                                <th>{% translate "Delete" %}</th>
                              </tr>
                            </thead>
                            <tbody>
                              {% for key,val in form.keep_source_fields.initial.items %}
                                <tr>
                                  <td><input type="text" value="{{ val.field_name }}"/></td>
                                  <td><input type="text" value="{{ key }}"/></td>
                                  <td style="text-align:center"><input type="checkbox" {% if val.keep_source %}checked{% endif %}/></td>
                                  <td style="text-align:center"><a class="btnDelete"><i style="color:grey" class="fas fa-trash-alt"></i></a></td>
                                </tr>
                              {% endfor %}
                            </tbody>
                          </table>
                          {{ form.keep_source_fields.errors|safe }}
                          <a class="btn btn-flat btn-primary" id="add_keep_source_field"><i class="fa fa-plus-circle">&nbsp;</i>Add an entry</a>
                          <input id="keep_source_fields" name="keep_source_fields" value="{{form.keep_source_fields.initial}}" type="hidden">
                        </div>
                      </div>
                    </div>
                    <div class="row logging">
                      <div class="col-md-12">
                        <div class="form-group collapse browsers-compat">
                          <table id="log_forwarders_table" class="table table-striped table-bordered table-hover dt-responsive nowrap table-datatable">
                            <thead>
                              {{ log_om_table.as_table_headers|safe }}
                            </thead>
                            <tbody>
                            {{ log_om_table.as_table_td|safe }}
                            </tbody>
                          </table>
                          <div style="text-align:right;margin-top:10px;">
                            <div class="add-group">
                              <button class="addplus addlink" id="add_log_fwd_entry" data-id="request_data_get" type="button">{% translate "Add an Entry" %}</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row logging">
                      <div class="col-md-12">
                        <div class="form-group collapse browsers-compat">
                          <label class="col-sm-4 control-label">{% translate "Logging conditions" %}</label>
                          <div class="col-sm-5">
                            {{form.log_condition}}
                            {{form.log_condition.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> <!-- /.tab-pane tab_logging -->
                  <div class="tab-pane" id="tab_enrichment">
                    <div class="row logging http-mode-logging">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Tenants config" %}</label>
                          <div class="col-sm-5">
                            {{form.tenants_config}}
                            {{form.tenants_config.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row logging http-mode-logging -->
                    <div class="row logging http-mode-logging">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Enable reputation logging" %}</label>
                          <div class="col-sm-5">
                            {{form.enable_logging_reputation}}
                            {{form.enable_logging_reputation.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row logging http-mode-logging -->
                    <div class="row reputation-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Reputation database IPv4" %}</label>
                          <div class="col-sm-5">
                            {{form.logging_reputation_database_v4}}
                            {{form.logging_reputation_database_v4.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row reputation-mode -->
                    <div class="row reputation-mode">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Reputation database IPv6" %}</label>
                          <div class="col-sm-5">
                            {{form.logging_reputation_database_v6}}
                            {{form.logging_reputation_database_v6.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row reputation-mode -->
                    <div class="row logging http-mode-logging">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-4 control-label">{% translate "Geoip database (v4 & v6)" %}</label>
                          <div class="col-sm-5">
                            {{form.logging_geoip_database}}
                            {{form.logging_geoip_database.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div> <!-- /.row logging http-mode-logging -->
                    <div class="row logging">
                      {% if not reputationctx_form.reputation_ctx.field.choices %}
                        <a class="btn btn-flat btn-primary" href="{% url 'applications.reputation_ctx.edit' %}">
                          <i class="fa fa-plus-circle">&nbsp;
                          </i>
                          {% translate "No custom tags for now, create a new <b>Custom tags</b> object." %}
                        </a>
                      {% else %}
                        <div class="col-md-12">
                          <div class="form-group">
                            <table id="reputationctx_table" class="table table-striped table-bordered table-hover dt-responsive nowrap table-datatable">
                              <thead>
                                {{ reputationctx_form.as_table_headers|safe }}
                              </thead>
                              <tbody>
                              {% for reputationctx in reputation_contexts %}
                                {{ reputationctx.as_table_td|safe }}
                              {% endfor %}
                              </tbody>
                            </table>
                            <div style="text-align:right;margin-top:10px;">
                              <div class="add-group">
                                <button class="addplus addlink" id="add_reputationctx_entry" data-id="request_data_get" type="button">{% translate "Add an Entry" %}</button>
                              </div>
                            </div>
                            {{ form.reputation_ctx.errors|safe }}
                            <input id="reputation_contexts" name="reputation_contexts" value="" type="hidden">
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div> <!-- /.tab-pane tab_enrichment -->
                  <div class="tab-pane" id="tab_custom_rsyslog">
                    {{ form.custom_actions }}
                    {{ form.custom_actions.errors|safe }}
                    {% include "custom_actions.html" %}
                  </div> <!-- /.tab-pane tab_custom_rsyslog -->
                  <div class="tab-pane" id="tab_custom_haproxy">
                    <div class="row haproxy-conf">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label class="col-sm-3 control-label">{% translate "HAProxy Frontend Config" %}</label>
                          <div class="col-sm-8">
                            {{form.custom_haproxy_conf}}
                            {{form.custom_haproxy_conf.errors|safe}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> <!-- /.tab-pane tab_custom_haproxy -->
                  <div class="tab-pane" id="tab_log_settings">
                    <div class="row">
                      <div class="col-md-12 api-mode">
                        <div class="form-group">
                          <label class="col-sm-3 control-label">{% translate "API Parser Type" %}</label>
                          <div class="col-sm-5">
                            {{ form.api_parser_type }}
                            {{ form.api_parser_type.errors|safe }}
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12 filebeat-mode">
                        <div class="form-group">
                          <label class="col-sm-3 control-label">{% translate "Use proxy" %}</label>
                          <div class="col-sm-5">
                            {{ form.api_parser_use_proxy }}
                            {{ form.api_parser_use_proxy.errors|safe }}
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12" id="api_parser_custom_proxy">
                        <div class="form-group">
                          <label class="col-sm-3 control-label">{{ form.api_parser_custom_proxy.label }}</label>
                          <div class="col-sm-5">
                            {{ form.api_parser_custom_proxy }}
                            {{ form.api_parser_custom_proxy.errors|safe }}
                          </div>
                        </div>
                      </div>
                      <div class="api-mode">
                        <div id="api_collector_form_div">
                          {% if api_collector_form %}
                          {{ api_collector_form }}
                          {% endif %}
                        </div>
                        <div class="col-md-12">
                          <div class="text-center mar-btm">
                            <button class="btn btn-warning" id="test_api_parser" type="button">
                              {% translate "Test Configuration" %}
                            </button>
                            <input type="hidden" name="api_parser_has_been_tested" id="id_api_parser_has_been_tested" value="{% if object_id %}1{% else %}0{% endif %}"/>
                          </div>
                        </div>
                      </div> <!-- form-group api-mode -->
                    </div> <!-- /.row -->
                  </div> <!-- /.tab-pane tab_log_settings -->
                </div>
              </div>
            </div>
            <div class="panel-footer">
              <a type="button" href="{% url 'services.frontend.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>
        </div>
      </div>
    </form>
  </section>

  <div class="modal" id="modal-test-apiparser">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                  <h4 class="modal-title">{% translate "API Parser results" %}</h4>
              </div>

              <div class="modal-body" id="modal-test-apiparser-body">

              </div>

              <div class="modal-footer">
                  <button class="btn btn-primary" data-dismiss="modal" type="button">{% translate "Continue" %}</button>
              </div>
          </div>
      </div>
  </div>

{% endblock %}

{% block jquery_code %}
  {% if save_error %}
    notify('error', '{% translate "Error" %}', '{{ save_error.0 }}');
  {% endif %}

  {% if errors %}
    notify('error', '{% translate "Error" %}', '{{ errors }}');
  {% endif %}

  var filebeat_config = {{ filebeat_module_config|safe }};
  var redis_local = {
    server: '{{ form.REDIS_DEFAULT_SERVER|safe }}',
    port: {{ form.REDIS_DEFAULT_PORT|safe }},
    password: '{{ form.REDIS_DEFAULT_PASSWORD|safe }}'
  }

  var header_form_td = `{{header_form.as_table_td|safe}}`
  var listener_form_td = `{{listener_form.as_table_td|safe}}`;
  var log_om_table_td = `{{log_om_table.as_table_td|safe}}`;
  var reputationctx_form_td = `{{reputationctx_form.as_table_td|safe}}`;
  var old_mode = $('id_mode').val();

  var custom_actions = {{ custom_actions.as_json|default:"[]"|safe }};

  var fetch_api_collector_form_uri = "{% url 'services.frontend.api_collector_form' "collector_name" %}";
  var test_frontend_apiparser_uri = "{% url 'services.frontend.test_apiparser' %}";
  var fetch_frontend_api_parser_data_uri = "{% url 'services.frontend.fetch_apiparser_data' %}";
  var api_parser_blacklist = ["cisco_meraki", "defender", "defender_atp", "gsuite_alertcenter", "mongodb",
                              "ms_sentinel", "office_365", "proofpoint_pod", "proofpoint_casb", "safenet",
                              "sophos_cloud", "symantec", "trendmicro_visionone", "waf_cloudflare", "retarus",
                              "vectra", "cisco_umbrella"
                              ];

{% endblock %}