{% extends "base.html" %}
{% block title %}{{ t('New Statement') }}{% endblock %}
{% block content %}
<div class="page-head"><div><small><a href="{{ url_for('bank.index') }}">{{ t('Bank Reconciliation') }}</a></small><h1>{{ t('New Statement') }}</h1></div></div>
<form method="post" class="card" enctype="multipart/form-data" style="max-width:900px">
  <div class="grid">
    <div class="field"><label>{{ t('Bank / Cash Journal') }} *</label>
      <select name="journal_id" id="jr">{% for j in journals %}<option value="{{ j.id }}" data-start="{{ starts[j.id]|plain(j.currency) }}" {{ 'selected' if j.id == jid }}>{{ j.bcode }} · {{ j.code }} — {{ nm(j) }} ({{ j.currency }})</option>{% endfor %}</select></div>
    <div class="field"><label>{{ t('Statement date') }} *</label><input type="date" name="date" value="{{ today }}" required></div>
    <div class="field"><label>{{ t('Description') }}</label><input name="name" placeholder="{{ t('e.g. October 2026') }}"></div>
    <div class="field"><label>{{ t('Starting balance') }}</label><input name="balance_start" id="bs" class="num" inputmode="decimal"></div>
    <div class="field"><label>{{ t('Ending balance') }}</label><input name="balance_end" class="num" inputmode="decimal"></div>
  </div>
  <h2 style="margin-top:22px">{{ t('Import lines (optional)') }}</h2>
  <div class="grid">
    <div class="field"><label>{{ t('CSV file from your bank') }}</label><input type="file" name="file" accept=".csv,.txt"></div>
    <div class="field"><label>{{ t('Date format') }}</label><select name="date_format">{% for fm in formats %}<option value="{{ fm }}">{{ fm }}</option>{% endfor %}</select></div>
  </div>
  <p class="muted"><small>{{ t('The first row must contain column names. Recognised: Date, Description, Reference, Amount — or Debit and Credit (Withdrawal / Deposit).') }}</small></p>
  <div class="form-actions"><button class="btn">{{ t('Create Statement') }}</button><a class="btn ghost" href="{{ url_for('bank.index') }}">{{ t('Cancel') }}</a></div>
</form>
{% endblock %}
{% block scripts %}
<script>
(function () {
  var jr = document.getElementById('jr'), bs = document.getElementById('bs');
  function fill() { var o = jr.selectedOptions[0]; if (o) bs.value = o.dataset.start || '0'; }
  jr.addEventListener('change', fill); fill();
})();
</script>
{% endblock %}