{% extends base_template %}

{% block title %}<h1>{{ title }}</h1>{% endblock %}

{% block content %}
    
<div class = 'tabbed-content {% block detailclass %}{%endblock %}'>

    <ul class="tabs clearfix">{% block tabs %}{% endblock %}</ul>

    <div id = 'pane' class = 'clearfix report'>
    
    {% block pane %}
        
        {% if filter %}
            <h4>FILTER BY:</h4>
            <form action="" method="get" class = 'clearfix'>
                {{ filter.form.media }}
                <table class = 'report-filter'>
                    {{ filter.form.as_table }}
                </table>
                <button class = 'button submit left'><span>Submit</span></button>
                <button class = 'button gray left csv'><span>Download as CSV</span></button>
            </form>
        {% endif %}

        {% if chart_data.chart_for == 'generic_transaction' %}
            <hr/>
            {% include "reports/chart_generic_transaction.html" %}
        {% endif %}
        
        {% block report %}
        
            {% if table %}
                {% include 'generic/table.html' %}
            {% endif %}
        
        {% endblock %}

    {% endblock %}
    
    </div>

</div>

{% endblock %}

{% block css %}
    {{ block.super }}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/zebra_datepicker.css" type="text/css">
{% endblock %}

{% block script %}
    
    {% if chart_data %}
        <script src="{{ STATIC_URL }}js/highcharts/highcharts.js"></script>
        <script src="{{ STATIC_URL }}js/script.chart.js"></script>
    {% endif %}
    <script src="{{ STATIC_URL }}js/zebra_datepicker.js"></script>
    <script>
        $('input.datepicker').Zebra_DatePicker({ format: 'd-m-Y'});
    </script>
{% endblock %}