{% extends "base.html" %}
{% from "_macros.html" import category_select, property_select, help %}
{% block title %}{{ t.payee or 'Transaction' }}{% endblock %}
{% block content %}
<header class="page-head">
  <div>
    <p class="crumbs"><a href="{{ back or url_for('main.transactions') }}">Transactions</a> / {{ t.account_name }}</p>
    <h1>{{ t.payee or '(no description)' }}</h1>
    <p class="muted">{{ t.date|usdate }} · <span class="{{ 'neg' if t.amount_cents < 0 else 'pos' }}">{{ t.amount_cents|money }}</span>
      · {{ t.status|title }}{% if t.check_number %} · Check #{{ t.check_number }}{% endif %}</p>
  </div>
  {% if flow == 'next' %}<div class="actions"><span class="pill pill-lg">{{ remaining }} left to categorize</span></div>{% endif %}
</header>

<form method="post" class="card" id="txn-form" data-total="{{ t.amount_cents|abs }}">
  <input type="hidden" name="flow" value="{{ flow }}">
  <input type="hidden" name="back" value="{{ back }}">
  <div class="form-grid">
    <label>Payee <input name="payee" value="{{ t.payee }}"></label>
    <label>Memo <input name="memo" value="{{ t.memo }}"></label>
    {% if editable %}
    <label>Date <input type="date" name="date" value="{{ t.date }}" required></label>
    <div class="amount-edit">
      <label>Amount <input name="amount" value="{{ t.amount_cents|abs|amount }}" inputmode="decimal" required></label>
      <div class="radio-row">
        <label class="check"><input type="radio" name="direction" value="out" {{ 'checked' if t.amount_cents < 0 }}> Money out</label>
        <label class="check"><input type="radio" name="direction" value="in" {{ 'checked' if t.amount_cents >= 0 }}> Money in</label>
      </div>
    </div>
    {% endif %}
  </div>

  {% if t.trade_id %}
    <p class="note">This is the cash side of a stock trade. Gains are calculated on the <a href="{{ url_for('main.trade_edit', trade_id=t.trade_id) }}">trade</a>.</p>
  {% endif %}

  <h2 class="section-title">Category</h2>
  <table class="table splits" id="splits">
    <thead><tr><th>Category</th><th>Property</th><th class="num">Amount {{ help('Enter amounts the same direction as the transaction. Use a minus sign for an item going the opposite way (e.g. a fee deducted from a rent deposit). Leave one amount blank to give it the remainder.') }}</th><th>Memo</th><th></th></tr></thead>
    <tbody>
    {% for s in split_rows %}
      <tr class="split-row">
        <td>{{ category_select('split_category', groups, s.category_id) }}</td>
        <td>{{ property_select('split_property', properties, s.property_id) }}</td>
        <td class="num"><input name="split_amount" class="split-amount" value="{{ s.amount }}" inputmode="decimal"></td>
        <td><input name="split_memo" value="{{ s.memo }}" placeholder="optional"></td>
        <td><button type="button" class="btn btn-sm btn-ghost remove-split" title="Remove line">✕</button></td>
      </tr>
    {% endfor %}
    </tbody>
    <tfoot><tr>
      <td colspan="2"><button type="button" class="btn btn-sm" id="add-split">+ Split into another category</button></td>
      <td class="num"><span id="split-remaining" class="small"></span></td><td colspan="2"></td>
    </tr></tfoot>
  </table>
  <p class="hint small muted" id="prop-hint" hidden>Rental categories should have a property, so they land in the right Schedule E column.</p>

  <label class="check rule-check">
    <input type="checkbox" name="make_rule" value="1" id="make-rule">
    Always categorize transactions whose description contains
    <input name="rule_text" value="{{ rule_text }}" class="inline-input"> this way
  </label>

  {% if similar %}
  <details class="similar" open>
    <summary>How you categorized “{{ t.payee }}” before</summary>
    <ul>{% for s in similar %}<li>{{ s.date|usdate }} · {{ s.amount_cents|money }} → {{ s.label }}</li>{% endfor %}</ul>
  </details>
  {% endif %}

  <div class="row-actions">
    {% if flow == 'next' %}
      <button class="btn btn-primary" name="action" value="save_next">Save &amp; next →</button>
      <a class="btn" href="{{ url_for('main.transactions') }}">Stop</a>
    {% else %}
      <button class="btn btn-primary" name="action" value="save">Save</button>
      <a class="btn" href="{{ back or url_for('main.transactions') }}">Cancel</a>
    {% endif %}
    <span class="spacer"></span>
    {% if t.status != 'reconciled' %}
      <button class="btn btn-ghost btn-danger-text" name="action" value="delete" formnovalidate onclick="return confirm('Delete this transaction?')">Delete transaction</button>
    {% endif %}
  </div>
</form>

<template id="split-template">
  <tr class="split-row">
    <td>{{ category_select('split_category', groups) }}</td>
    <td>{{ property_select('split_property', properties) }}</td>
    <td class="num"><input name="split_amount" class="split-amount" inputmode="decimal"></td>
    <td><input name="split_memo" placeholder="optional"></td>
    <td><button type="button" class="btn btn-sm btn-ghost remove-split" title="Remove line">✕</button></td>
  </tr>
</template>
{% endblock %}