{% extends "query_reports/base.html" %}
{% load query_reports_tags crispy_forms_tags %}
{% load url from future %}

{% block title %}{{ report.name }}{% endblock %}

{% block extrahead %}
    <script>
        $(function () {
            $(".datefield").datepicker();
        });
    </script>
    <link rel="stylesheet" href="/media/dash/styles/jquery-ui.css"/>
{% endblock %}

{% block breadcrumbs %}
    <div class="breadcrumbs">
    </div>
{% endblock %}

{% block content %}
    <a class="label label-default pull-right"
       href="{% url "admin:query_reports_queryreport_change" report.pk %}">
        Edit in Admin
    </a>
    <h2>
        {{ report.name }}
    </h2>

    <div class="row">
        <div class="col-md-6">
            {% if form %}
                <form action="." class="form-horizontal">
                    {% crispy form form.helper %}
                    <div class="row">
                        <div class="col-xs-4">
                        </div>
                        <div class="col-xs-8">
                            <button class="btn btn-primary" name="SUBMIT">
                                Go
                            </button>
                        </div>
                    </div>
                </form>
            {% endif %}
        </div>
        <div class="col-md-6">

            {% if dataset.query or query %}
                <div>
                    <a class="btn btn-default btn-sm"
                       href="#debug-query"
                       data-toggle="collapse">
                        Show Query
                    </a>

                    <p id="debug-query" class="collapse well">
                        {{ dataset.query }}<br/>{{ query }}
                    </p>
                </div>
            {% endif %}

            {% if ex or error %}
                <div id="report-error"
                     class="alert alert-danger">

                    <h4>{{ ex }}</h4>
                    <pre>{{ error }}</pre>
                    <pre>{{ errors }}</pre>
                </div>
            {% endif %}
        </div>
    </div>

    {% if dataset %}
        <hr>

        <table class="table table-striped table-condensed table-bordered">
            <thead>
            <tr>{% for header in headers %}
                <th>{{ header }}</th>{% endfor %}</tr>
            </thead>
            {% for row in data %}
                <tr>
                    {% for item in row %}
                        <td align="{{ alignment|get:forloop.counter0 }}">{{ item }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
            <tfoot>
            <tr>
                {% for total in totals %}
                    <th>{{ total }}</th>
                {% endfor %}
            </tr>
            </tfoot>
        </table>
        {% if page %}
            <ul class="pagination">
            {% for p in page|pages:7 %}
                {% if not p %}
                    {% if forloop.first %}
                        <li class="disabled"><span>&lt;</span></li>
                    {% else %}
                        <li class="disabled"><span>&gt;</span></li>
                    {% endif %}
                {% else %}
                    {% if p.number != page.number %}
                        <li>
                            <a href="?page={{ p.number }}{% for n,v in request.GET.items %}&{{ n }}={{ v }}{% endfor %}">
                                {{ p.number }}
                            </a>
                        </li>
                    {% else %}
                        <li class="active">
                            <a href="?page={{ p.number }}{% for n,v in request.GET.items %}&{{ n }}={{ v }}{% endfor %}">
                                {{ p.number }}
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endfor %}
            </ul>
        {% endif %}
        <div>{{ dataset.count }} total</div>
    {% endif %}
{% endblock %}