{% extends "layouts/content.html" %}
{% load static %}

{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static "lava_results_app/css/chart.css" %}"/>
{% endblock %}

{% block content %}
<h1>Add new query to chart...</h1>

{% block content_form %}
<form action="" method="post">{% csrf_token %}

  {% if form.errors %}
  <div class="errors">
    <div>
      {{ form.non_field_errors }}
      <ul>
	{% for field in form %}
	{% if field.errors %}
        <li>{{ field.label }}: {{ field.errors|striptags }}</li>
        {% endif %}
	{% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}

<div class="help-text" style="margin-left: 10px;">Type to search for the query using the query name.<br>Available queries will appear in a list below.<br>A query name is required to save the changes to the Chart.
</div>
<div id="add_filter_link" class="form-field">
  <div style="display: inline;">
    <label for="id_query">Query:</label>
  </div>
  <div class="typeahead__container">
    <div class="typeahead__field">
      <div class="typeahead__query">
        <input id="query" type="search" placeholder="Search" autocomplete="off" value="{{ instance.query.owner_name }}" />
        {{ form.query }}
        {{ form.chart }}
        {{ form.relative_index }}
      </div>
    </div>
  </div>
</div>

<div class="form-field">
  {{ form.chart_type.label_tag }}
  {{ form.chart_type }}
</div>
<div class="form-field" id="attributes_container">
  {{ form.attributes.label_tag }}
  {{ form.attributes }}
  &nbsp;&nbsp;
  <button class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="right" title="Add list of custom attributes separated by comma(','). Attributes used will be from the related query content type objects.">?</button>

</div>
<div class="form-field">
  {{ form.xaxis_attribute.label_tag }}
  {{ form.xaxis_attribute }}
</div>
<div class="form-field">
  {{ form.chart_height.label_tag }}
  {{ form.chart_height }}
</div>
<div class="form-field">
  {{ form.chart_visibility.label_tag }}
  {{ form.chart_visibility }}
</div>
<div class="form-field">
  {{ form.representation.label_tag }}
  {{ form.representation }}
</div>


<div class="submit-button">
  <input type="submit" value="Save" />
</div>
</form>

{% endblock content_form %}

{% endblock %}

{% block scripts %}
<script src="{% static "lava_server/js/jquery.typeahead.js" %}"></script>
<script>

$(document).ready(function () {

  $("#query").typeahead({
    source: {queries: {ajax: {type:"GET", url: '{% url 'lava.results.get_query_names' %}', data: {term: "{{query}}"}}}},
    display: ["value"],
    minLength: 1,
    callback: {
      onClickAfter: function(node, a, item, event) {
        $("#id_query").val(item.id);
      },
    }
  });

  $("#id_chart_type").change(function() {
    if ($(this).val() == "attributes") {
      $("#attributes_container").show();
    } else {
      $("#attributes_container").hide();
    }
  });

  $("#id_chart_type").change();
});

</script>

{% endblock %}
