<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>{{ name }}</title>

    <!-- Bootstrap CSS -->
    <style>{{ "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"|get_resource_as_string }}</style>
    <style>{{ "https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fh-3.1.4/r-2.2.2/datatables.min.css"|get_resource_as_string }}</style>
    <style>
    #container {
      width: 100%;
      margin-top: 1em;
    }

    .table {
      width: 100%;
    }
    </style>
  </head>
  <body>
    <div id="container">
      <table class="table">
        <caption>Tabular results</caption>
        <thead>
        <tr>
          {% for colname in columns %}
          <th scope="col">{{ colname|escape }}</th>
          {% endfor %}
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </body>
  <script>{{ "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"|get_resource_as_string }}</script>
  <script>{{ "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"|get_resource_as_string }}</script>
  <script>{{ "https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fh-3.1.4/r-2.2.2/datatables.min.js"|get_resource_as_string }}</script>

  <script>
    var data = [
      {% for row in table %}
        [
          {% for value in row %}
            {{ value|tojson }}{{ "," if not loop.last }}
          {% endfor %}
        ]{{ "," if not loop.last }}
      {% endfor %}
    ];

    $('table').DataTable({
      data: data,
      dom: 'Bfrtip',
      fixedHeader: true,
      responsive: true,
      buttons: [
          'csvHtml5', 'excelHtml5', 'print'
      ]
    });
  </script>
</html>
