{% extends "base.html" %}
{% block title %}Reconcile Transactions - BiweeklyBudget{% endblock %}
{% block extra_head_css %}
    <!-- Bootstrap Datepicker CSS -->
    <link href="/static/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="/static/startbootstrap-sb-admin-2/vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">

    <script>
        var acct_names_to_id = {};
        {% for name in accts.keys()|sort %}
        acct_names_to_id["{{ name }}"] = "{{ 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 %}

        // store state for reconciled transactions - dict of Trans ID to
        // Array of [OFX account_id, OFX fitid]
        var reconciled = {};
        var ofxIgnored = {};
    </script>
{% endblock %}
{% block body %}
            <!-- reconcile page doesn't get notifications, but gets the empty div to hold status messages -->
            <div class="row" id="notifications-row">
                <div class="col-lg-12">
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row" id="content-row">
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><strong>Transactions</strong></div>
                        <div class="panel-body panel-vert-scroll" id="trans-panel"></div>
                    </div>
                </div>
                <!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><strong>OFX</strong></div>
                        <div class="panel-body panel-vert-scroll" id="ofx-panel"></div>
                    </div>
                </div>
                <!-- /.col-lg-6 -->
            </div>
            <!-- /.row -->
            <div class="row" id="submit-row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <button type="button" class="btn btn-primary" id="reconcile-submit">Submit</button>
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
{% include 'modal.html' %}
{% endblock %}
{% block extra_foot_script %}
    <!-- BootStrap DatePicker JS -->
    <script src="/utils/datetest.js"></script>
    <script src="/static/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

    <!-- DataTables JavaScript -->
    <script src="/static/startbootstrap-sb-admin-2/vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/static/startbootstrap-sb-admin-2/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="/static/startbootstrap-sb-admin-2/vendor/datatables-responsive/dataTables.responsive.js"></script>

    <!-- jQuery UI JS -->
    <script src="/static/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

<script>
var default_account_id = {{ settings.DEFAULT_ACCOUNT_ID }};
</script>
<script src="/static/js/forms.js"></script>
<script src="/static/js/formBuilder.js"></script>
<script src="/static/js/transactions_modal.js"></script>
<script src="/static/js/scheduled_modal.js"></script>
<script src="/static/js/ofx.js"></script>
<script src="/static/js/reconcile.js"></script>
{% endblock %}
