{% extends "base.html" %}
{% block title %}Pay fine #{{ fine.id }} — {{ library_name() }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/ui/patrons">Patrons</a></li>
    <li><a href="/ui/patrons/{{ patron_card }}/fines">Fines</a></li>
    <li>Pay fine #{{ fine.id }}</li>
  </ul>
</nav>

<h2>Pay fine #{{ fine.id }}</h2>
{% if error %}<p class="error-banner">{{ error }}</p>{% endif %}
<p>
  {{ fine.kind | replace("_", " ") }} · assessed {{ fine.assessed_at.strftime("%Y-%m-%d") }}<br>
  Amount {{ fine.amount_cents | currency }}
  {% if fine.paid_cents %} · paid so far {{ fine.paid_cents | currency }}{% endif %}
  · <strong>remaining {{ fine.balance_cents | currency }}</strong>
</p>
<form method="post" action="/ui/fines/{{ fine.id }}/pay" style="max-width:24rem">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <input type="hidden" name="patron_card" value="{{ patron_card }}">
  <label for="pay-amount">Amount to pay
    <input type="text" id="pay-amount" name="amount" inputmode="decimal" value="{{ balance_dollars }}" required>
  </label>
  <label for="pay-note">Note <small>(optional)</small>
    <input type="text" id="pay-note" name="note">
  </label>
  <div style="display:flex; gap:1rem; align-items:center">
    <button type="submit">Record payment</button>
    <a href="/ui/patrons/{{ patron_card }}/fines">Cancel</a>
  </div>
</form>
{% endblock %}