{% extends "objs.html" %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dropdown.css') }}" />
    <script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='dropdown.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='querywidget.js') }}"></script>
    <script type="text/javascript">
      var criteria = {{ indexes|tojson|safe }};
      $(function () {
        $.dropdown.replace($("select"));
        $("#save").bind('click', function (event) {
          var query = $(location).attr('search');
          if (!query)
            return false;
          query = query.slice(1);
          var form = $(document.createElement('form')).attr({
            'action': '{{ url_for('manage.queries.create') }}',
            'method': 'POST' });
          form.append($(document.createElement('input')).attr({
            'type': 'hidden',
            'name': 'db',
            'value': '{{ database.id }}' }));
          form.append($(document.createElement('input')).attr({
            'type': 'hidden',
            'name': 'query',
            'value': query }));          
          $("body").append(form);
          form.submit();
          form.remove();
          return false;
        });
      });
    </script>
{% endblock %}

{% block above %}
<div class="query wrapper">
  <form method="GET" action="">
    {% block extra %}{% endblock %}
    <div id="criteria" class="wrapper">
      {% for field, op, value, error in query %}
      {% set cssclass = '' %}
      {% if error %}{% set cssclass = cssclass + 'error' %}{% endif %}
      <div class="criteria wrapper">
        <span class="querywidget field">{{ indexes[field]['name'] }}</span>
        <input type="hidden" name="field" value="{{ field }}" />
        <select class="querywidget operator" name="operator">
          {% for name in indexes[field]['operators'] %}
          {% if op == name %}
          <option value="{{ name }}" selected="selected">{{ name }}</option>
          {% else %}
          <option value="{{ name }}">{{ name }}</option>
          {% endif %}
          {% endfor %}
        </select>
        {% if indexes[field]['type'] == 'enum' %}
        <select class="querywidget value" name="value">
          {% for name in indexes[field]['values'] %}
          {% if value == name %}
          <option value="{{ name }}" selected="selected">{{ name }}</option>
          {% else %}
          <option value="{{ name }}">{{ name }}</option>
          {% endif %}
          {% endfor %}
        </select>
        {% else %}
        <input class="querywidget value {{ cssclass }}" type="text" name="value" value="{{ value }}" />
        {% endif %}
        <input class="querywidget remove" type="button" name="remove" value="&times;" />
      </div>
      {% endfor %}
    </div>

    <select id="add">
      <option value="" selected="selected">Add criteria&hellip;</option>
      {% for key, index in indexes.iteritems() %}
      <option value="{{ key }}">{{ index['name'] }}</option>
      {% endfor %}
    </select>

    <input type="submit" value="search" />

    {% if 'admin' in g.identity.roles %}
    <input id="save" type="submit" name="save" value="save query" />
    {% endif %}

  </form>
</div>
{% endblock %}