  <form>
    {%- if view.show_controls %}
      <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown">
          Select
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="">All</a></li>
          <li><a href="">All</a></li>
          <!-- dropdown menu links -->
        </ul>
      </div>
    {%- endif %}
    <table id="listing_{{ view.name }}" class="table table-striped table-bordered table-condensed">
      <thead>
      <tr>
        {%- if view.show_controls %}
          <th style="width: 1%;"></th>
        {%- endif %}
        {%- for col in view.columns %}
          <th style="width: {{ col.width }}%;">{{ col.label }}</th>
        {%- endfor %}
      </tr>
      </thead>

      <tbody>
        <tr><td colspan="{{ view.columns|count }}">Loading data...</td></tr>
      </tbody>

      <tfoot>
      <tr>
        {%- if view.show_controls %}
          <th></th>
        {%- endif %}
        {%- for col in view.columns %}
          <th>{{ col.label }}</th>
        {%- endfor %}
      </tr>
      </tfoot>
    </table>
  </form>

  {%- deferJS %}
  <script type="text/javascript">
    Abilian.fn.onAppInit(function() {

      var tbl = $("#listing_{{ view.name }}").dataTable({{ datatable_options|tojson|safe }});

      /* export button: setup url args on click, to match current table filtering */
      tbl.bind('xhr', $.fn.dataTableSetExportArgs);
      $('.datatable-export').click(
          { 'table': tbl.get(0) },
          function(e) {
              var tbl = e.data.table;
              var target = $(e.target);
              var href = target.attr('href');
              var params = $.data(tbl, 'current-query-args');
              var concat_char = href.indexOf('?') == -1 ? '?' : '&';
              window.location = href + concat_char + $.param(params);
              return false;
          }
      );

      $(document).bind("keydown", keyDown);

      function keyDown(e) {
        var code = e.keyCode;
        // Note: we prevent default keyboard action
        if (code == 39) {
          $("li.next a").click();
          return false;
        } else if (code == 37) {
          $("li.prev a").click();
          return false;
        }
        return true;
      }
    });
  </script>
  {%- enddeferJS %}
    
<div style="clear: both;"></div>
