<table id="recordTable">
  <tr class="recordFieldHeaders">
    {% for key_and_filters in record_keys_and_filters %}
      {% with key=key_and_filters.key %}
        <td id="{{ key }}" class="recordFieldHeader">
          <b>{{ key }}</b>
          <a href="{{ base_url }}?sort_keys={{ sort_keys }}:{{ key_and_filters.key }}&model={{ model }}&filters={{ filter_param_string }}">Ascending</a>
          <a href="{{ base_url }}?sort_keys={{ sort_keys }}:-{{ key_and_filters.key }}&model={{ model }}&filters={{ filter_param_string }}">Descending</a>
          {% for filter in key_and_filters.filters %}
            <div class="filterGroup">
              <label for="{{ key }}_filter_{{ forloop.counter0 }}">Filter: </label>
              <input type="text" value="{{ filter.value }}" name="{{ key }}_filter_{{ forloop.counter0 }}"/>
              <select>
                {% for specifier in key_and_filters.possible_specifiers %}
                  <option value="{{ specifier }}"
                          {% if specifier == filter.specifier %}selected{% endif %}>{{ specifier }}</option>
                {% endfor %}
              </select>
            </div>
          {% endfor %}
        </td>
      {% endwith %}
    {% endfor %}
  </tr>
  {% for record in records %}
    <tr>
      {% for value in record %}
        <td>
          {{ value }}
        </td>
      {% endfor %}
    </tr>
  {% endfor %}
</table>
<p>Page {{ page.number }} of {{ paginator.num_pages }}</p>
{% if page.has_previous %}
  <a href="{{ base_url }}?pg={{ page.previous_page_number }}&sort_keys={{ sort_keys }}&model={{ model }}&filters={{ filter_param_string }}">Previous
    Page</a>
{% endif %}
{% if page.has_next %}
  <a href="{{ base_url }}?pg={{ page.next_page_number }}&sort_keys={{ sort_keys }}&model={{ model }}&filters={{ filter_param_string }}">Next
    Page</a>
{% endif %}
<a href="{{ base_url }}?model={{ model }}">Clear Customization</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  function doFilters() {
    var FILTER_INNER_SEPARATOR = "~~~";
    var FILTER_OUTER_SEPARATOR = ":::";
    var table_headers = $(".recordFieldHeader");
    var filters = [];
    for (var i = 0; i < table_headers.length; i++) {
      var table_header = table_headers[i];
      var key = table_header.id;
      var filter_groups = $(table_header).find(".filterGroup");
      for (var j = 0; j < filter_groups.length; j++) {
        var filter_group = filter_groups[j];
        var filter_value = $(filter_group).find("input").val();
        if (filter_value.length === 0) continue;
        var filter_specifier = $(filter_group).find("select").val();
        filters.push([key, filter_value, filter_specifier].join(FILTER_INNER_SEPARATOR));
      }
    }
    window.location.href = "{{ base_url }}?sort_keys={{ sort_keys }}&model={{ model }}&filters=" +
        filters.join(FILTER_OUTER_SEPARATOR);
  }

  $($(".filterGroup").find("input")).keydown(function (event) {
    console.log("h");
    if (event.which == 13) {
      doFilters();
    }
  });
</script>