{% extends "base.html" %}
{% block title %}BiweeklyBudget{% endblock %}
{% block extra_head_css %}
    <script>
        var active_acct_names_to_id = {};
        {% for name in active_accts.keys()|sort %}
        active_acct_names_to_id["{{ name }}"] = "{{ active_accts[name] }}";
        {% endfor %}
        var budget_names_to_id = {};
        {% for id in budgets.keys()|sort %}
        budget_names_to_id["{{ budgets[id] }}"] = "{{ id }}";
        {% endfor %}
        var active_budget_names_to_id = {};
        {% for id in active_budgets.keys()|sort %}
        active_budget_names_to_id["{{ active_budgets[id] }}"] = "{{ id }}";
        {% endfor %}
        // Days of account balance history the chart opens on; see
        // biweeklybudget.settings.ACCOUNT_BALANCE_CHART_DEFAULT_DAYS. 0 means
        // all recorded history.
        var ACCOUNT_BALANCE_CHART_DEFAULT_DAYS = {{ settings.ACCOUNT_BALANCE_CHART_DEFAULT_DAYS }};
    </script>
{% endblock %}
{% block body %}
{% include 'notifications.html' %}
            <!-- /.row -->
            <div class="row" id="content-row">
                <div class="col-lg-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-bar-chart-o fa-fw"></i> Account Balances
                            <div class="btn-group btn-group-xs pull-right" id="account-balance-chart-ranges" role="group" aria-label="Account balance chart date range">
                                {% for label, days in [('1m', 30), ('3m', 90), ('6m', 180), ('1y', 365), ('2y', 730), ('5y', 1825), ('All', 0)] %}
                                <button type="button" class="btn btn-default{% if settings.ACCOUNT_BALANCE_CHART_DEFAULT_DAYS == days %} active{% endif %}" data-days="{{ days }}">{{ label }}</button>
                                {% endfor %}
                            </div>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div id="account-balance-chart"></div>
                            <div id="account-balance-chart-nodata" style="display: none;">No account balance data to display.</div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                    <div class="col-lg-6">
                        <div class="panel panel-default" id="panel-standing-budgets">
                            <div class="panel-heading">
                                Standing Budgets
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-striped" id="table-standing-budgets">
                                        <thead>
                                            <tr>
                                                <th>Budget</th>
                                                <th>Current Balance</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {% for b in standing_budgets %}
                                            <tr>
                                                <td><a href="/budgets/{{ b.id }}">{{ b.name }} ({{ b.id }})</a></td>
                                                <td>
                                                    <span>{{ b.current_balance|dollars }}</span>
                                                </td>
                                            </td>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                    <!-- /.col-lg-6 -->
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">Pay Periods <em><a href="/pay_period_for">(permalink to current pay period)</a></em></div>
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover" id="pay-period-table">
                                        <thead>
                                            <tr>
                                                <th>Start Date</th>
                                                <th>Allocated</th>
                                                <th>Spent</th>
                                                <th>Remaining</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for period in periods %}
                                            {% if curr_pp.start_date == period.start_date %}
                                            <tr class="info">
                                                <td><a href="/payperiod/{{ period.start_date|dateymd }}">{{ period.start_date|dateymd }}</a> <em>(current)</em></td>
                                            {% else %}
                                            <tr>
                                                <td><a href="/payperiod/{{ period.start_date|dateymd }}">{{ period.start_date|dateymd }}</a></td>
                                            {% endif %}
                                                <td>{{ period.overall_sums['allocated']|dollars }}</td>
                                                <td>{{ period.overall_sums['spent']|dollars }}</td>
                                                <td>{{ period.overall_sums['remaining']|reddollars|safe }}</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel -->
                    </div>
                    <!-- /.col-lg-6 -->
                </div>
                <!-- /.col-lg-8 -->
                <div class="col-lg-4">
                    <div class="panel panel-default" id="panel-bank-accounts">
                        <div class="panel-heading">
                            <i class="fa fa-bank fa-fw"></i> Bank Accounts
                            <button type="button" class="btn btn-primary btn-xs btn_acct_txfr" id="btn_acct_txfr_bank">Transfer</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped" id="table-accounts-bank">
                                    <thead>
                                        <tr>
                                            <th>Account</th>
                                            <th>Balance</th>
                                            <th>Unreconciled</th>
                                            <th>Difference</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for acct in bank_accounts|sort(attribute='name') %}
                                        <tr>
                                            <td><a href="/accounts/{{ acct.id }}">{{ acct.name }}</a></td>
                                            {% set ledger = acct.balance.ledger if acct.balance else None %}
                                            <td>
                                                <span>{{ ledger|dollars }}</span>
                                                {% if acct.ofx_statement %}
                                                <span class="data_age{% if acct.is_stale %} text-danger{% endif %}">({{ acct.ofx_statement.as_of|ago }})</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ acct.unreconciled_sum|dollars }}</td>
                                            <td>{% if ledger is not none %}{{ (ledger - acct.unreconciled_sum)|reddollars|safe }}{% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                    <div class="panel panel-default" id="panel-credit-cards">
                        <div class="panel-heading">
                            <i class="fa fa-credit-card fa-fw"></i> Credit Cards
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th>Account</th>
                                            <th>Balance</th>
                                            <th>Available</th>
                                            <th>Avail - Unrec</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for acct in credit_accounts|sort(attribute='name') %}
                                        <tr>
                                            <td><a href="/accounts/{{ acct.id }}">{{ acct.name }}</a></td>
                                            {% set ledger = acct.balance.ledger if acct.balance else None %}
                                            <td>
                                                <span>{{ ledger|dollars }}</span>
                                                {% if acct.ofx_statement %}
                                                <span class="data_age{% if acct.is_stale %} text-danger{% endif %}">({{ acct.ofx_statement.as_of|ago }})</span>
                                                {% endif %}
                                            </td>
                                            <td>{% if ledger is not none and acct.credit_limit is not none %}{{ (acct.credit_limit + ledger)|reddollars|safe }}{% endif %}</td>
                                            <td>{% if ledger is not none and acct.credit_limit is not none %}{{ (acct.credit_limit + ledger - acct.unreconciled_sum)|reddollars|safe }}{% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                    <div class="panel panel-default" id="panel-investment">
                        <div class="panel-heading">
                            <i class="glyphicon glyphicon-piggy-bank"></i> Investment Accounts
                            <button type="button" class="btn btn-primary btn-xs btn_acct_txfr" id="btn_acct_txfr_invest">Transfer</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped" id="table-accounts-investment">
                                    <thead>
                                        <tr>
                                            <th>Account</th>
                                            <th>Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for acct in investment_accounts|sort(attribute='name') %}
                                        <tr>
                                            <td><a href="/accounts/{{ acct.id }}">{{ acct.name }}</a></td>
                                            {% set ledger = acct.balance.ledger if acct.balance else None %}
                                            <td>
                                                <span>{{ ledger|dollars }}</span>
                                                {% if acct.ofx_statement %}
                                                <span class="data_age{% if acct.is_stale %} text-danger{% endif %}">({{ acct.ofx_statement.as_of|ago }})</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-4 -->
            </div>
            <!-- /.row -->
{% include 'modal.html' %}
{% endblock %}
{% block extra_foot_script %}
    <!-- Chart.js, its date adapter, Hammer.js and the zoom plugin; see static/chartjs/README.rst -->
    <script src="/static/chartjs/chart.umd.min.js"></script>
    <script src="/static/chartjs/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script src="/static/chartjs/hammer.min.js"></script>
    <script src="/static/chartjs/chartjs-plugin-zoom.min.js"></script>
    <script src="/static/js/charts.js"></script>
    <script src="/static/js/index.js"></script>
    <!-- BootStrap DatePicker JS -->
    <script src="/utils/datetest.js"></script>
    <script src="/static/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/static/js/forms.js"></script>
    <script src="/static/js/formBuilder.js"></script>
    <script src="/static/js/account_transfer_modal.js"></script>
    <script>
    $(document).ready(function() {
        $('.btn_acct_txfr').click(function() {
            accountTransferModal();
        });
    });
    </script>
{% endblock %}