{% extends "base.html" %}
{% from "_partials/empty_state.html" import empty_state %}
{% block title %}My Loans — {{ library_name() }}{% endblock %}
{% block content %}
<h2>My Loans</h2>
{% if not loans %}
  {{ empty_state("No active loans", "When you check out items they will appear here.", cta_href="/ui/catalog", cta_label="Browse catalog") }}
{% else %}
<table class="responsive-table">
  <thead>
    <tr><th>Barcode</th><th>Title</th><th>Due</th><th>Action</th></tr>
  </thead>
  <tbody>
    {% for loan in loans %}
    <tr id="loan-{{ loan.id }}">
      <td data-label="Barcode"><code>{{ loan.item.barcode }}</code></td>
      <td data-label="Title"><a href="/ui/catalog/{{ loan.item.work_id }}">{{ loan.item.work.title }}</a></td>
      <td data-label="Due">{{ loan.due_at.strftime("%Y-%m-%d") if loan.due_at else "—" }}</td>
      <td data-label="" style="display:flex; gap:0.5rem; flex-wrap:wrap">
        <form
          hx-post="/ui/me/loans/{{ loan.id }}/renew"
          hx-target="#loan-{{ loan.id }}"
          hx-swap="innerHTML"
          hx-include="[name='csrf_token']"
          style="margin:0"
        >
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button type="submit" class="outline" style="padding:0.2rem 0.6rem">Renew</button>
        </form>
        {% if has_permission(user, 'loan.claim.self') %}
        <form
          hx-post="/ui/me/loans/{{ loan.id }}/claim-returned"
          hx-target="#loan-{{ loan.id }}"
          hx-swap="innerHTML"
          hx-include="[name='csrf_token']"
          hx-confirm="Tell the library you returned this item? A librarian will investigate and confirm."
          style="margin:0"
        >
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button type="submit" class="outline contrast" style="padding:0.2rem 0.6rem">I returned this</button>
        </form>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% endblock %}