{% extends "base.html" %}
{% block title %}Reconcile {{ acct.name }}{% endblock %}
{% block content %}
<header class="page-head"><div>
  <p class="crumbs"><a href="{{ url_for('main.reconcile_index') }}">Reconcile</a> /</p>
  <h1>{{ acct.name }} — statement ending {{ rec.statement_date|usdate }}</h1>
  <p class="muted">Tick each transaction that appears on the paper or PDF statement. Leave unticked anything that isn't on it yet.</p>
</div></header>

<form method="post" id="rec-form"
      data-start="{{ rec.starting_balance_cents }}" data-end="{{ rec.ending_balance_cents }}" data-sign="{{ sign }}">
  <div class="rec-summary card sticky">
    <div><span class="label">Starting balance</span><span class="value">{{ (rec.starting_balance_cents * sign)|money }}</span></div>
    <div><span class="label">{{ 'Charges' if liability else 'Payments / withdrawals' }} ticked</span><span class="value" id="sum-out">$0.00</span></div>
    <div><span class="label">{{ 'Payments / credits' if liability else 'Deposits' }} ticked</span><span class="value" id="sum-in">$0.00</span></div>
    <div><span class="label">Cleared balance</span><span class="value" id="cleared">—</span></div>
    <div><span class="label">Statement {{ 'balance owed' if liability else 'ending balance' }}</span><span class="value">{{ (rec.ending_balance_cents * sign)|money }}</span></div>
    <div class="diff-box"><span class="label">Difference</span><span class="value" id="difference">—</span></div>
  </div>

  <div id="culprits" class="flash flash-warn" hidden></div>

  <section class="card flush">
    <table class="table rec-table">
      <thead><tr>
        <th class="cb"><input type="checkbox" id="rec-all" aria-label="Tick all on or before statement date"></th>
        <th>Date</th><th>Check #</th><th>Payee</th><th>Category</th>
        <th class="num">{{ 'Charges' if liability else 'Out' }}</th><th class="num">{{ 'Payments' if liability else 'In' }}</th>
      </tr></thead>
      <tbody>
      {% set ns = namespace(after=false) %}
      {% for t in rows %}
        {% if t.date > rec.statement_date and not ns.after %}{% set ns.after = true %}
          <tr class="divider"><td colspan="7">After the statement date — usually not on this statement</td></tr>
        {% endif %}
        <tr class="{{ 'after' if t.date > rec.statement_date }}">
          <td class="cb"><input type="checkbox" name="cleared" value="{{ t.id }}" class="rec-cb" data-amount="{{ t.amount_cents }}"
              data-before="{{ 1 if t.date <= rec.statement_date else 0 }}"
              {{ 'checked' if t.status == 'cleared' and t.date <= rec.statement_date }}></td>
          <td class="nowrap">{{ t.date|usdate }}</td>
          <td>{{ t.check_number }}</td>
          <td>{{ t.payee }}{% if t.memo %}<div class="muted small">{{ t.memo }}</div>{% endif %}</td>
          <td class="small">{{ t.category_names or '' }}</td>
          <td class="num">{% if t.amount_cents < 0 %}{{ (-t.amount_cents)|money }}{% endif %}</td>
          <td class="num">{% if t.amount_cents > 0 %}{{ t.amount_cents|money }}{% endif %}</td>
        </tr>
      {% else %}
        <tr><td colspan="7" class="empty">No unreconciled transactions. Import this month's download first.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </section>

  <div class="row-actions sticky-bottom">
    <button class="btn btn-primary" name="action" value="finish" id="finish-btn">Finish — books match statement</button>
    <button class="btn" name="action" value="save">Save for later</button>
    <a class="btn btn-ghost" href="{{ url_for('main.transaction_new', account=acct.id, back=request.path) }}">+ Add a missing transaction</a>
    <span class="spacer"></span>
    <button class="btn btn-ghost btn-danger-text" name="action" value="cancel" onclick="return confirm('Cancel this reconciliation?')">Cancel</button>
  </div>
</form>
{% endblock %}