{% extends "base.html" %}

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

{% block content %}
<section class="page-intro mb-4 d-flex flex-wrap justify-content-between align-items-end gap-3">
  <div>
    <span class="eyebrow">Transaction log</span>
    <h1 class="section-title">All recorded transactions</h1>
    <p class="muted-copy">Review entries, totals, and drill into the exact balance movements for each one.</p>
  </div>
  <a class="btn btn-momo-primary" href="{% url 'transaction_create' %}">Add transaction</a>
</section>
<section class="row g-4 mb-4">
  <div class="col-md-4"><article class="balance-card balance-card-primary"><span>Total entries</span><strong>{{ summary.total_count|default:0 }}</strong></article></div>
  <div class="col-md-4"><article class="balance-card balance-card-secondary"><span>Total amount</span><strong>{{ summary.total_amount|default:0 }}</strong></article></div>
  <div class="col-md-4"><article class="balance-card balance-card-accent"><span>Total service fees</span><strong>{{ summary.total_fees|default:0 }}</strong></article></div>
</section>
<section class="content-card">
  {% if transactions %}
  <div class="table-responsive">
    <table class="table align-middle momo-table">
      <thead>
        <tr>
          <th>Client</th>
          <th>Type</th>
          <th>Amount</th>
          <th>Service charge</th>
          <th>Balances after</th>
          <th>Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for transaction in transactions %}
        <tr>
          <td>{{ transaction.client_name }}</td>
          <td><span class="badge momo-badge">{{ transaction.get_transaction_type_display }}</span></td>
          <td>{{ transaction.amount }}</td>
          <td>{{ transaction.service_charge }}</td>
          <td>E {{ transaction.ecash_after }} · P {{ transaction.physical_after }}</td>
          <td>{{ transaction.created_at|date:"M d, Y H:i" }}</td>
          <td><a class="text-link" href="{% url 'transaction_detail' transaction.id %}">Open</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <h3>No entries yet</h3>
    <p>Your transaction log will appear here after the first saved record.</p>
    <a class="btn btn-momo-primary" href="{% url 'transaction_create' %}">Create first transaction</a>
  </div>
  {% endif %}
</section>
{% endblock %}