{% extends "base.html" %}
{% block title %}Spending By Budget - BiweeklyBudget{% endblock %}
{% block extra_head_css %}
    <style>
        .spending-panel .panel-body { min-height: 470px; }
        .spending-dates { color: #777; font-size: 0.9em; margin-left: 0.5em; }
        .spending-total { font-size: 1.3em; font-weight: bold; }
        .spending-chart { position: relative; height: 240px; }
        .spending-nodata { color: #777; font-style: italic; text-align: center; padding: 100px 0; }
        .spending-table td.num, .spending-table th.num { text-align: right; white-space: nowrap; }
        .budget-spending-swatch { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.35em; vertical-align: -0.1em; border-radius: 2px; }
        #budget-spending-selection label { margin-right: 1.5em; font-weight: normal; }
    </style>
{% endblock %}
{% block body %}
{% include 'notifications.html' %}
            <div class="row" id="content-row">
                <div class="col-lg-12">
                    <div class="panel panel-default" id="panel-budget-spending-selection">
                        <div class="panel-heading">
                            <i class="fa fa-filter fa-fw"></i> Budgets Included
                        </div><!-- /.panel-heading -->
                        <div class="panel-body">
                            <p>
                                Net spending per budget, from actual transactions. Income budgets,
                                transfers, credit card payments and transactions marked as having no
                                budget impact are not counted. Untick a budget to leave it out of
                                every chart below; this is not saved. To leave a budget out of charts
                                permanently, tick <em>Omit from graphs?</em> on it on the
                                <a href="/budgets">Budgets</a> page; such budgets start unticked here.
                            </p>
                            <div id="budget-spending-selection"></div>
                        </div><!-- /.panel-body -->
                    </div><!-- /.panel -->
                    <div class="alert alert-danger" id="budget-spending-error" style="display: none;">
                        Unable to load spending data. See the application log for details.
                    </div>
                </div><!-- /.col-lg-12 -->
            </div><!-- /.row -->
            <div class="row" id="budget-spending-charts">
{% for key, name in periods %}
                <div class="col-lg-4 col-md-6">
                    <div class="panel panel-default spending-panel" id="panel-spending-{{ key }}">
                        <div class="panel-heading">
                            <i class="fa fa-pie-chart fa-fw"></i> <span id="spending-{{ key }}-title">{{ name }}</span>
                            <span class="spending-dates" id="spending-{{ key }}-dates"></span>
                        </div><!-- /.panel-heading -->
                        <div class="panel-body">
                            <p>Total spent: <span class="spending-total" id="spending-{{ key }}-total"></span></p>
                            <div class="spending-chart" id="spending-{{ key }}-chart"></div>
                            <div class="spending-nodata" id="spending-{{ key }}-nodata" style="display: none;">No spending in this period.</div>
                            <table class="table table-condensed table-striped spending-table" id="spending-{{ key }}-table">
                                <thead>
                                    <tr><th>Budget</th><th class="num">Amount</th><th class="num">Percent</th></tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div id="spending-{{ key }}-credits" style="display: none;">
                                <p class="text-muted">Net credits (refunds exceeded spending; not charted):</p>
                                <ul></ul>
                            </div>
                        </div><!-- /.panel-body -->
                    </div><!-- /.panel -->
                </div><!-- /.col -->
{% endfor %}
            </div><!-- /.row -->
{% endblock %}
{% block extra_foot_script %}
<!-- Chart.js; see static/chartjs/README.rst. The donuts need no zoom plugin. -->
<script src="/static/chartjs/chart.umd.min.js"></script>
<script src="/static/js/budget_spending.js"></script>
{% endblock %}