{% if rows %}
<div class="card shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover table-sm align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th>Category</th>
          <th>Period</th>
          <th>Window</th>
          <th class="text-end">Budget €</th>
          <th class="text-end">Actual €</th>
          <th class="text-end">Remaining €</th>
          <th class="text-end">Used</th>
          <th>Status</th>
          <th class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          <td><a href="{{ row.txn_url }}">{{ row.category }}</a></td>
          <td>{{ row.period }}</td>
          <td>{{ row.period_start.isoformat() }} → {{ row.period_end.isoformat() }}</td>
          <td class="text-end">{{ "%.2f" | format(row.budget) }}</td>
          <td class="text-end"><a href="{{ row.txn_url }}">{{ "%.2f" | format(row.actual) }}</a></td>
          <td class="text-end">{{ "%.2f" | format(row.remaining) }}</td>
          <td class="text-end">{{ row.percentage }}%</td>
          <td>
            {% if row.status == 'over' %}
            <span class="badge rounded-pill text-bg-danger">over</span>
            {% elif row.status == 'near' %}
            <span class="badge rounded-pill text-bg-warning">near</span>
            {% else %}
            <span class="badge rounded-pill text-bg-success">under</span>
            {% endif %}
          </td>
          <td class="text-end">
            <div class="d-flex gap-2 justify-content-end">
              <a href="/budgets/{{ row.id }}/edit" class="btn btn-sm btn-outline-secondary">Edit</a>
              <form method="post" action="/budgets/{{ row.id }}/delete"
                    onsubmit="return confirm('Delete the {{ row.period }} budget for “{{ row.category }}”?');">
                <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="card shadow-sm">
  <div class="card-body text-center py-5">
    <i class="bi bi-piggy-bank display-4 text-muted d-block mb-3"></i>
    <p class="lead text-muted mb-0">
      No budgets{% if period %} with period "{{ period }}"{% endif %} valid for this date. Add one below.
    </p>
  </div>
</div>
{% endif %}