{% extends "base.html" %}
{% block title %}Import{% endblock %}
{% block content %}
<header class="page-head"><div><h1>Import a statement</h1>
<p class="muted">Download transactions from your bank's website and bring them in here. Duplicates are skipped automatically, so overlapping date ranges are fine.</p></div></header>

<div class="grid-2">
<section class="card">
  <h2>Upload a file</h2>
  {% if not accounts %}
    <p>First <a href="{{ url_for('main.accounts_page') }}">add the account</a> the file belongs to.</p>
    <p class="muted small">(Quicken QIF/QFX files can also create accounts for you — upload one and choose “new account”.)</p>
  {% endif %}
  <form method="post" enctype="multipart/form-data" class="stack">
    <label>Account
      <select name="account_id">
        <option value="">Detect from file (QFX/OFX/QIF only)</option>
        {% for a in accounts %}<option value="{{ a.id }}" {{ 'selected' if preselect == a.id }}>{{ a.name }}</option>{% endfor %}
      </select>
    </label>
    <label class="file-drop">
      <input type="file" name="file" required accept=".csv,.txt,.tsv,.xlsx,.xlsm,.xls,.ofx,.qfx,.qbo,.qif">
      <span>Choose a <strong>.csv</strong>, <strong>.xlsx</strong>, <strong>.qfx</strong>, <strong>.ofx</strong> or <strong>.qif</strong> file</span>
    </label>
    <div><button class="btn btn-primary">Import</button></div>
  </form>
</section>

<section class="card">
  <h2>Which format should I download?</h2>
  <dl class="formats">
    <dt>Quicken / Web Connect (.qfx) or OFX</dt>
    <dd>Best choice. It includes the bank's unique ID for each transaction and the statement balance, and for brokerages the actual trades.</dd>
    <dt>CSV or Excel</dt>
    <dd>Works with any bank. The first time, you'll confirm which column is the date, description and amount — the layout is remembered for next time.</dd>
    <dt>QIF</dt>
    <dd>Older Quicken export. Categories in the file are kept when their names match yours.</dd>
  </dl>
  <p class="muted small">Tip: download each month's statement period (e.g. the 1st through the last day), then reconcile right after importing.</p>
</section>
</div>

{% if batches %}
<section class="card">
  <h2>Recent imports</h2>
  <table class="table">
    <thead><tr><th>When</th><th>Account</th><th>File</th><th class="num">Added</th><th class="num">Duplicates skipped</th><th></th></tr></thead>
    <tbody>
    {% for b in batches %}
      <tr>
        <td class="nowrap small">{{ b.imported_at }}</td>
        <td>{{ b.account }}</td>
        <td class="small">{{ b.filename }} <span class="pill">{{ b.format }}</span></td>
        <td class="num">{{ b.added_count }}</td>
        <td class="num">{{ b.skipped_count }}</td>
        <td class="right">
          <a class="btn btn-sm" href="{{ url_for('main.transactions', account=b.account_id) }}">View</a>
          <form method="post" action="{{ url_for('main.import_undo', batch_id=b.id) }}" class="inline" onsubmit="return confirm('Remove everything this import added?')"><button class="btn btn-sm btn-ghost">Undo</button></form>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}
{% endblock %}