{% extends 'base.html' %}
{% load static i18n %}


{% block title %}
  {{ model.meta.verbose_name_plural|capfirst }}
{% endblock %}


{% block css %}
  {{ block.super }}
  <link rel="stylesheet" type="text/x-scss" href="{% static 'css/tablature.scss' %}" />
{% endblock %}

{% block js %}
  {{ block.super }}
  <script src="{% static 'js/tablature.js' %}"></script>
  <script>
    $(function () {
      var filters = [
        {% for filter in filters %}
          [
            {% for value, verbose in filter %}
              ['{{ value|escapejs }}','{{ verbose|escapejs }}']{% if not forloop.last %},{% endif %}
            {% endfor %}
          ]{% if not forloop.last %},{% endif %}
        {% endfor %}
      ];
      new Table(
        $('#table'), ['{{ columns|join:"','" }}'],
        ['{{ columns_widths|join:"','" }}'],
        [{{ sortables|join:',' }}], filters,
        {{ results_per_page }}, '{% trans 'results' %}',
        '{% trans 'Sort by this column' %}',
        '{% trans 'Filter by this column' %}',
        '{% trans 'Clear selection' %}'
      );
    });
  </script>
{% endblock %}


{% block content %}
  <h1>
    {{ model.meta.verbose_name_plural|capfirst }}
  </h1>

  <div id="table">

    <header class="row">
      <form class="col-md-3">
        <div class="input-group">
          <input type="text" placeholder="{% trans 'Search…' %}" class="form-control" />
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
              <i class="fa fa-search"></i>
            </button>
          </span>
        </div>
      </form>
      <div class="col-md-2">
        <span class="count"></span>
        <span class="spinner pull-right">
          <i class="fa fa-spinner fa-spin"></i>
        </span>

      </div>
      <nav class="col-md-7 text-right">
        <ul class="pagination pagination-sm"></ul>
      </nav>
    </header>

    <div class="table-responsive">
      <table class="table table-condensed table-striped table-bordered">
        <thead></thead>
        <tbody></tbody>
      </table>
    </div>

  </div>

{% endblock %}