{{ header }}

<main id="account-transaction" class="franklin-account-page franklin-transaction-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="transaction-hero">
      <div class="transaction-hero-content">
        <span class="transaction-eyebrow">
          <i class="bi bi-wallet2"></i>
          Account Transactions
        </span>

        <h1>{{ heading_title }}</h1>

        <p>
          Review the financial transactions recorded against your Franklin customer account.
        </p>
      </div>

      <div class="transaction-balance-card">
        <span class="transaction-balance-label">{{ text_total }}</span>
        <strong>{{ total }}</strong>
        <small>Current account balance</small>
      </div>
    </section>

    <div class="transaction-layout">

      <aside class="transaction-info-card">
        <span class="transaction-info-icon">
          <i class="bi bi-cash-stack"></i>
        </span>

        <h2>Your Account Balance</h2>

        <p>
          Every credit or debit recorded against your account appears in the transaction history.
        </p>

        <div class="transaction-info-list">
          <div>
            <i class="bi bi-calendar3"></i>
            <span>
              <strong>Transaction Date</strong>
              <small>See when each account entry was added.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-card-text"></i>
            <span>
              <strong>Description</strong>
              <small>Review the reason or reference for each entry.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-currency-rupee"></i>
            <span>
              <strong>Transaction Amount</strong>
              <small>View the value applied to your account balance.</small>
            </span>
          </div>
        </div>

        <a href="{{ continue }}" class="btn transaction-back-button">
          <i class="bi bi-arrow-left"></i>
          {{ button_continue }}
        </a>
      </aside>

      <section class="transaction-history-card">

        <div class="transaction-history-heading">
          <span class="transaction-history-heading-icon">
            <i class="bi bi-list-ul"></i>
          </span>

          <div>
            <h2>Transaction History</h2>
            <p>All account credits and debits recorded for your customer account.</p>
          </div>
        </div>

        {% if transactions %}

          <div class="transaction-items">
            {% for transaction in transactions %}
              <article class="transaction-item">

                <div class="transaction-item-main">
                  <span class="transaction-item-icon">
                    <i class="bi bi-receipt"></i>
                  </span>

                  <div class="transaction-item-details">
                    <h3>{{ transaction.description }}</h3>

                    <span class="transaction-item-date">
                      <i class="bi bi-calendar3"></i>
                      {{ transaction.date_added }}
                    </span>
                  </div>
                </div>

                <div class="transaction-amount">
                  <span>{{ column_amount }}</span>
                  <strong>{{ transaction.amount }}</strong>
                </div>

              </article>
            {% endfor %}
          </div>

        {% else %}

          <div class="transaction-empty-state">
            <div class="transaction-empty-icon">
              <i class="bi bi-wallet"></i>
            </div>

            <h3>No Transactions Found</h3>
            <p>{{ text_no_results }}</p>
          </div>

        {% endif %}

        <div class="transaction-pagination">
          <div>{{ pagination }}</div>
          <div class="transaction-results">{{ results }}</div>
        </div>

        <div class="transaction-footer-action">
          <a href="{{ continue }}" class="btn btn-primary">
            <i class="bi bi-arrow-left"></i>
            {{ button_continue }}
          </a>
        </div>

      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

{{ footer }}