{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<section class="page-intro mb-4">
  <span class="eyebrow">Transaction input</span>
  <h1 class="section-title">Record a new cash movement</h1>
  <p class="muted-copy">Choose a transaction type and MoMoLedger applies the wallet movement rules for you. Defaults: Debt and Expenditure reduce physical cash, while Credit increases physical cash.</p>
</section>
<div class="row g-4">
  <div class="col-lg-7">
    <article class="content-card">
      <form method="post" class="momo-form" novalidate>
        {% csrf_token %}
        <div class="row g-3">
          {% for field in form %}
          <div class="col-12 {% if field.name != 'notes' %}col-md-6{% endif %}">
            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            {% for error in field.errors %}<div class="form-error">{{ error }}</div>{% endfor %}
          </div>
          {% endfor %}
        </div>
        {% for error in form.non_field_errors %}<div class="form-error mt-3">{{ error }}</div>{% endfor %}
        <button class="btn btn-momo-primary btn-lg mt-4" type="submit">Save transaction</button>
      </form>
    </article>
  </div>
  <div class="col-lg-5">
    <article class="content-card h-100">
      <p class="card-kicker mb-1">Current wallet state</p>
      <h2 class="section-title mb-3">{{ profile.business_name }}</h2>
      <div class="preview-metrics two-up">
        <div><span>E-cash available</span><strong>{{ profile.current_ecash }}</strong></div>
        <div><span>Physical cash available</span><strong>{{ profile.current_physical_cash }}</strong></div>
      </div>
      <div class="rule-list mt-4">
        <div class="rule-item"><strong>Cash-In</strong><span>e-cash − amount, physical cash + amount</span></div>
        <div class="rule-item"><strong>Cash-out</strong><span>physical cash − amount, e-cash + amount</span></div>
        <div class="rule-item"><strong>Sending</strong><span>e-cash − amount, physical cash + amount + 1% fee</span></div>
        <div class="rule-item"><strong>Airtime / Transfer</strong><span>e-cash − amount, physical cash + amount</span></div>
      </div>
    </article>
  </div>
</div>
{% endblock %}