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

    <div class="d-flex justify-content-between align-items-center mb-4">
      <h4 style="font-weight: 600;">Debts</h4>
      <a class="btn btn-info" href="/debts/new">+ New Debt</a>
    </div>

    {{#if debts.length}}
    <div class="mx-2">
      {{#each debts}}
      <div class="row flex-md-nowrap py-3 record" style="margin: 0; background: #F2EFE3; border-radius: 4px; margin-bottom: 10px;">
        <div class="col-md-3 d-flex align-items-center">
          <h5 class="record-name" style="margin: 0;">{{ this.name }}</h5>
        </div>
        <div class="col-md-2 text-center">
          <small class="text-muted">Total Owed</small>
          <div style="font-weight: 600;">{{ this.formattedTotalOwed }}</div>
        </div>
        <div class="col-md-2 text-center">
          <small class="text-muted">Paid</small>
          <div style="font-weight: 600; color: #3B6B4A;">{{ this.formattedAmountPaid }}</div>
        </div>
        <div class="col-md-2 text-center">
          <small class="text-muted">Remaining</small>
          <div style="font-weight: 600; color: #8B2E1F;">{{ this.formattedRemaining }}</div>
        </div>
        <div class="col-md-2 text-center">
          {{#if (eq this.status 'ActivelyRepaying')}}
          <span class="badge badge-success">Repaying</span>
          {{else}}
          <span class="badge badge-secondary">Not Repaying</span>
          {{/if}}
        </div>
        <div class="col-md-1 d-flex justify-content-center align-items-center">
          <a href="/debts/{{ this.id }}/edit" class="mr-2"><i class="fas fa-edit icon-edit"></i></a>
          <form method="POST" action="/debts/{{ this.id }}?_method=DELETE" class="record-delete"
            onsubmit="return checkDelete()" style="margin: 0;">
            <button type="submit" class="record-deleteBtn"><i class="fas fa-trash-alt icon-delete"></i></button>
          </form>
        </div>
      </div>
      {{/each}}
    </div>
    {{else}}
    <div class="text-center py-5">
      <p class="text-muted">No debts recorded yet.</p>
    </div>
    {{/if}}

  </div>
</div>
