{% 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 | humanize_enum }}</td>
      <td data-label="Amount">
        {{ fine.amount_cents | currency }}
        {% if fine.paid_cents and fine.status == "outstanding" %}
        <br><small>{{ fine.paid_cents | currency }} paid &middot; {{ fine.balance_cents | currency }} remaining</small>
        {% endif %}
      </td>
      <td data-label="Status">{{ fine.status | humanize_enum }}</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 %}