{% extends "base.html" %}
{% block title %}Match columns{% endblock %}
{% block content %}
<header class="page-head"><div>
  <p class="crumbs"><a href="{{ url_for('main.import_page') }}">Import</a> / {{ meta.filename }}</p>
  <h1>Check the columns</h1>
  <p class="muted">Importing into <strong>{{ acct.name }}</strong>. We guessed the layout below — check the preview on the right, fix anything that's off, then import.</p>
</div></header>

<form method="post" class="map-layout">
  <section class="card">
    <h2>Column layout</h2>
    <div class="stack">
      <label>Header row
        <select name="header_row">
          {% for i, label in header_options %}<option value="{{ '' if i is none else i }}" {{ 'selected' if mapping.header_row == i }}>{{ label }}</option>{% endfor %}
        </select>
      </label>
      {% for key, label in fields.items() %}
      <label>{{ label }}
        <select name="col_{{ key }}">
          <option value="">—</option>
          {% for i in range(labels|length) %}<option value="{{ i }}" {{ 'selected' if mapping.get(key) == i }}>{{ labels[i] }}</option>{% endfor %}
        </select>
      </label>
      {% endfor %}
      <label>Date format
        <select name="date_order">
          <option value="auto" {{ 'selected' if mapping.date_order == 'auto' }}>Automatic (US month/day)</option>
          <option value="mdy" {{ 'selected' if mapping.date_order == 'mdy' }}>Month/Day/Year</option>
          <option value="dmy" {{ 'selected' if mapping.date_order == 'dmy' }}>Day/Month/Year</option>
        </select>
      </label>
      <label class="check"><input type="checkbox" name="flip_sign" value="1" {{ 'checked' if mapping.flip_sign }}>
        Flip signs — {% if liability %}this card shows <em>charges as positive</em> numbers{% else %}payments show as positive numbers{% endif %}</label>
    </div>
    <div class="row-actions">
      <button class="btn" name="action" value="preview">Update preview</button>
    </div>
  </section>

  <section class="card">
    <h2>Preview</h2>
    {% if error %}<div class="flash flash-error">{{ error }}</div>{% endif %}
    {% if parsed %}
      <p class="muted small">{{ parsed.transactions|length }} transaction(s){% if parsed.trades %} and {{ parsed.trades|length }} trade(s){% endif %} found.
        Money out should be <span class="neg">negative</span>, deposits{% if liability %} and card payments{% endif %} positive.</p>
      {% for w in parsed.warnings %}<div class="flash flash-warn">{{ w }}</div>{% endfor %}
      <table class="table compact">
        <thead><tr><th>Date</th><th>Description</th><th class="num">Amount</th></tr></thead>
        <tbody>
        {% for t in sample_txns %}
          <tr><td class="nowrap">{{ t.date|usdate }}</td><td>{{ t.payee }}{% if t.memo %} <span class="muted small">{{ t.memo }}</span>{% endif %}</td>
            <td class="num {{ 'neg' if t.amount_cents < 0 else 'pos' }}">{{ t.amount_cents|money }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
      {% if sample_trades %}
      <h3>Trades</h3>
      <table class="table compact">
        <thead><tr><th>Date</th><th>Action</th><th>Symbol</th><th class="num">Shares</th><th class="num">Amount</th></tr></thead>
        <tbody>{% for t in sample_trades %}
          <tr><td>{{ t.date|usdate }}</td><td>{{ t.action }}</td><td>{{ t.symbol }}</td><td class="num">{{ t.quantity|qty }}</td><td class="num">{{ t.amount_cents|money }}</td></tr>
        {% endfor %}</tbody>
      </table>
      {% endif %}
      <div class="row-actions">
        <button class="btn btn-primary" name="action" value="import">Import {{ parsed.transactions|length + parsed.trades|length }} entries</button>
        <a class="btn btn-ghost" href="{{ url_for('main.import_page') }}">Cancel</a>
      </div>
    {% endif %}
    <details class="raw-preview">
      <summary>Raw file rows</summary>
      <div class="scroll-x">
      <table class="table compact raw">
        <thead><tr>{% for l in labels %}<th>{{ l }}</th>{% endfor %}</tr></thead>
        <tbody>{% for row in preview %}<tr>{% for c in row %}<td>{{ c }}</td>{% endfor %}</tr>{% endfor %}</tbody>
      </table>
      </div>
    </details>
  </section>
</form>
{% endblock %}