{% extends base_template %}
{% block title %}{{ account.reference }}{% endblock %}
{% block content %}
<div class="d-flex align-items-center justify-content-between gap-3 mb-3">
  <div>
    <h1 class="h3 mb-1">{{ account.reference }}</h1>
    <div class="text-muted">{{ account.borrower_name }}</div>
  </div>
  <div class="d-flex flex-wrap gap-2">
    <a class="btn btn-outline-secondary" href="{% url 'django_repaykit:statement' account.uuid %}">Statement</a>
    <a class="btn btn-outline-secondary" href="{% url 'django_repaykit:schedule_csv' account.uuid %}">CSV</a>
    {% if can_record_repayment and repayment_recording_enabled %}
      <a class="btn btn-primary" href="{% url 'django_repaykit:repayment_create' account.uuid %}">Add Repayment</a>
    {% endif %}
    {% if can_request_settlement and settlement_enabled %}
      <a class="btn btn-outline-primary" href="{% url 'django_repaykit:settlement_quote' account.uuid %}">Settlement</a>
    {% endif %}
  </div>
</div>
{% include "django_repaykit/includes/account_summary.html" %}
<h2 class="h5">Statement</h2>
{% include "django_repaykit/includes/statement_summary.html" %}
<div x-data="{ open: true }" class="mb-4">
  <div class="d-flex align-items-center justify-content-between mb-2">
    <h2 class="h5 mb-0">Repayment Schedule</h2>
    <button class="btn btn-sm btn-outline-secondary" type="button" x-on:click="open = !open">
      <span x-text="open ? 'Hide' : 'Show'"></span>
    </button>
  </div>
  <div x-show="open">
    {% include "django_repaykit/includes/schedule_table.html" %}
  </div>
</div>
<h2 class="h5">Repayments</h2>
{% include "django_repaykit/includes/repayment_table.html" %}
{% if settlement_requests %}
  <h2 class="h5 mt-4">Settlement Requests</h2>
  <div class="table-responsive">
    <table class="table table-sm">
      <thead><tr><th>Date</th><th>Status</th><th class="text-end">Quoted Amount</th></tr></thead>
      <tbody>
        {% for request in settlement_requests %}
          <tr>
            <td>{{ request.settlement_date }}</td>
            <td>{{ request.status }}</td>
            <td class="text-end">{{ default_currency }} {{ request.quoted_amount }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endif %}
{% endblock %}