{% extends "base.html" %}
{% from "_partials/empty_state.html" import empty_state %}
{% block title %}My Fines — {{ library_name() }}{% endblock %}
{% block content %}
<h2>My Fines</h2>
<p>Outstanding balance: <strong>{{ outstanding_cents | currency }}</strong></p>

{% if not fines %}
{{ empty_state("No fines on record", "Your account is in good standing.") }}
{% else %}
<table class="responsive-table">
  <thead>
    <tr><th>Kind</th><th>Amount</th><th>Status</th><th>Assessed</th><th>Note</th></tr>
  </thead>
  <tbody>
    {% for fine in fines %}
    <tr>
      <td data-label="Kind">{{ fine.kind | replace("_", " ") }}</td>
      <td data-label="Amount">{{ fine.amount_cents | currency }}</td>
      <td data-label="Status">{{ fine.status }}</td>
      <td data-label="Assessed">{{ fine.assessed_at.strftime("%Y-%m-%d") }}</td>
      <td data-label="Note">{{ fine.note or "—" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

{% if outstanding_cents > 0 %}
<p style="color:var(--pico-muted-color); margin-top:1rem">
  <small>Fines can be paid at the circulation desk. Contact a librarian for assistance.</small>
</p>
{% endif %}
{% endblock %}