{% 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 detail</span>
    <h1 class="section-title">{{ transaction.get_transaction_type_display }} for {{ transaction.client_name }}</h1>
    <p class="muted-copy">Saved on {{ transaction.created_at|date:"F d, Y H:i" }}.</p>
  </div>
  <a class="btn btn-momo-ghost" href="{% url 'transaction_list' %}">Back to log</a>
</section>
<div class="row g-4">
  <div class="col-lg-8">
    <article class="content-card">
      <div class="detail-grid">
        <div><span>Business</span><strong>{{ profile.business_name }}</strong></div>
        <div><span>Client</span><strong>{{ transaction.client_name }}</strong></div>
        <div><span>Amount</span><strong>{{ transaction.amount }}</strong></div>
        <div><span>Service charge</span><strong>{{ transaction.service_charge }}</strong></div>
        <div><span>Recorded by</span><strong>{{ transaction.created_by.get_full_name|default:transaction.created_by.username }}</strong></div>
        <div><span>Notes</span><strong>{{ transaction.notes|default:'—' }}</strong></div>
      </div>
    </article>
  </div>
  <div class="col-lg-4">
    <article class="content-card h-100">
      <p class="card-kicker mb-1">Balance impact</p>
      <h2 class="section-title mb-3">Wallet movement</h2>
      <div class="movement-card">
        <div><span>E-cash before</span><strong>{{ transaction.ecash_before }}</strong></div>
        <div><span>E-cash after</span><strong>{{ transaction.ecash_after }}</strong></div>
        <div><span>Physical before</span><strong>{{ transaction.physical_before }}</strong></div>
        <div><span>Physical after</span><strong>{{ transaction.physical_after }}</strong></div>
      </div>
    </article>
  </div>
</div>
{% endblock %}