{% extends frame.html %}

{% block body %}
<div id="report-body">
    <h1><div class="report-name w3-left">{{report['report_type_name']}}</div>          <a href="/admin/report/{{report['report_type_id']}}" class="w3-right w3-btn w3-blue w3-large">Run Report</a></h1>

    {% if output %}
    <div class="w3-container">
        {# Combined with timeframe/rollup and table sorting, this could be super powerful      #}
        {# Simple Sort HTML Table:   https://www.w3schools.com/howto/howto_js_sort_table.asp   #}
        <table class="w3-table-all w3-hoverable w3-border w3-border-blue-grey w3-medium">
            <tr>
                {% for name in column_names %}
                <th>{{name}}</th>
                {% end %}
            </tr>
            {% for row in output %}
            <tr>
                {% for name in column_names %}
                <td>{{row.get(name)}}</td>
                {% end %}
            </tr>
            {% end %}
            <tr>
                <td class="w3-border-top w3-border-cyan">TOTALS</td>
                {% for name in column_names[1:] %}
                <td class="w3-border-top w3-border-cyan">{{name}}</td>
                {% end %}
            </tr>
            <tr>
                <td class="w3-border-bottom w3-border-blue-grey">{{num_rows}} Rows</td>
                {% for column_name in column_names[1:] %}
                <td class="w3-border-bottom w3-border-blue-grey">{{report_totals.get(column_name, '')}}</td>
                {% end %}
            </tr>
        </table>
        {% elif errors.get('sql_error') %}
        <pre class="w3-text-red">{{errors['sql_error']}}</pre>
        {% end %}
    </div>

</div>

<br/>
<div id="report-sql" class="w3-card w3-border-top w3-border-blue w3-medium">
  <h1>SQL       <a href="/admin/report/form/{{report['report_type_id']}}" class="w3-right w3-btn w3-blue w3-large">Edit</a></h1>
  <pre>{{report['report_sql']}}</pre>
</div>


{% end %}
