{% extends "site_base.html" %}
{% load bootstrap %}
{% load registrasion_tags %}

{% block page_title %}Registration report{% endblock %}
{% block head_title %}Registration report - {{ title }}{% endblock %}

{% block content %}

  <h2>{{ title }}</h2>

  <p><a href="{% url 'reports_list' %}">Return to reports list</a></p>

  {% if form %}
    <form class="form-horizontal" method="GET">
      {{ form | bootstrap}}
      <br/>
      <input class="btn btn-primary" type="submit">
    </form>
  {% endif %}
<hr />

{% for report in reports %}
<h3>{{ report.title }}</h3>
{% if report.headings %}
<table class="table table-striped table-reportdata">
  <thead>
    <tr>
      {% for heading in report.headings %}
      <th>{{ heading }}</th>
      {% endfor %}
    </tr>
  </thead>
{% else %}
<table class="table table-striped">
{% endif %}
  <tbody>
    {% for line in report.rows %}
    <tr>
      {% for item in line %}
      <td>{{ item|safe }}</td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

<hr class="my-5" />
{% endfor %}

{% endblock %}

{% block extra_script %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-colvis-1.6.0/b-html5-1.6.0/b-print-1.6.0/cr-1.5.2/fc-3.3.0/fh-3.1.6/r-2.2.3/rg-1.1.1/datatables.min.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.0/b-colvis-1.6.0/b-html5-1.6.0/b-print-1.6.0/cr-1.5.2/fc-3.3.0/fh-3.1.6/r-2.2.3/rg-1.1.1/datatables.min.js"></script>

<script type="text/javascript">
  $("table.table-reportdata").dataTable({
    "dom":
      "<'row'<'col-sm-12 col-md-3'l><'col-sm-12 col-md-5'B><'col-sm-12 col-md-4'f>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    "stateSave": true,
    "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
    "pageLength": 100,
    "buttons": [
      "csv",
      "print",
      {
        extend: 'copy',
        text: 'Copy',
        exportOptions: {
          columns: ':visible'
        }
      },
      {
        extend: 'collection',
        text: 'Columns',
        buttons: [ 'columnsToggle']
      }
    ]
  });
</script>
{% endblock %}