<div class="row py-5">
  <div class="col-md-11 mx-auto" style="max-width: 960px;">

    <div class="d-flex justify-content-between align-items-center mb-4">
      <h4 style="font-weight: 600;"><i class="fas fa-book mr-2" style="color: #3B6B4A;"></i>Money Trail</h4>
    </div>

    {{!-- Ledger Filter --}}
    <div class="mb-4">
      <div class="btn-group btn-group-sm" role="group">
        <a href="/ledger" class="btn {{#unless ledgerFilter}}btn-primary{{else}}btn-outline-primary{{/unless}}">All</a>
        <a href="/ledger?ledger=Personal" class="btn {{#if (eq ledgerFilter 'Personal')}}btn-primary{{else}}btn-outline-primary{{/if}}">Personal</a>
        <a href="/ledger?ledger=Business" class="btn {{#if (eq ledgerFilter 'Business')}}btn-primary{{else}}btn-outline-primary{{/if}}">Business</a>
      </div>
    </div>

    {{#if records.length}}
    <div class="table-responsive">
      <table class="table table-sm ledger-table" style="position: relative;">
        <thead>
          <tr>
            <th>Date</th>
            <th>Ledger</th>
            <th>Category</th>
            <th>Description</th>
            <th class="text-right">Amount</th>
            <th class="text-right">Running Balance</th>
          </tr>
        </thead>
        <tbody>
          {{#each records}}
          <tr style="position: relative;">
            <td style="font-family: 'IBM Plex Mono', monospace; white-space: nowrap;">{{this.formattedDate}}</td>
            <td>
              {{#if (eq this.ledger 'Personal')}}
              <span class="badge badge-primary">Personal</span>
              {{else}}
              <span class="badge badge-info">Business</span>
              {{/if}}
            </td>
            <td>{{this.category_name}}</td>
            <td>
              {{this.name}}
              {{#if this.is_transfer}}
              <span class="transfer-stamp transfer-stamp-lg ml-2">TRANSFERRED</span>
              {{/if}}
            </td>
            <td class="text-right" style="color: {{#if this.isExpense}}#8B2E1F{{else}}#3B6B4A{{/if}}; font-family: 'IBM Plex Mono', monospace; white-space: nowrap;">
              {{this.formattedAmount}}
            </td>
            <td class="text-right" style="color: #2C2720; font-family: 'IBM Plex Mono', monospace; white-space: nowrap;">
              {{this.formattedBalance}}
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
    {{else}}
    <div class="text-center py-5">
      <p class="text-muted">No records found.</p>
    </div>
    {{/if}}

  </div>
</div>
