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

{% 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">
{% else %}
    <table class="table table-striped">
{% endif %}
    <thead>
        <tr>
            {% for heading in report.headings %}
            <th>{{ heading }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for line in report.rows %}
        <tr>
            {% for item in line %}
            <td>
                {{ item|safe }}
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
    </table>

<hr />
{% endfor %}

{% endblock %}

{% block extra_script %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.js"></script>
<script type="text/javascript">
        $("table.table-reportdata").dataTable({
            "dom": "<'row'<'col-md-3'l><'col-md-3'B><'col-md-4'f>r>t<'row'<'col-md-3'i><'col-md-5'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 %}