<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...') }}</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">
    require(['Abilian', 'jquery', 'jquery.dataTables'],
        function (Abilian, $) {

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

            /* 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;
            }
          }

          Abilian.fn.onAppInit(initDatatable)
        }
    );
  </script>
{%- enddeferJS %}

<div style="clear: both;"></div>
