{% extends "base.html" %}
{% from "_macros.html" import status_pill %}
{% from "_partials/empty_state.html" import empty_state %}
{% block title %}My Holds — {{ library_name() }}{% endblock %}
{% block content %}
<h2>My Holds</h2>
{% if error %}<p class="error-banner">{{ error }}</p>{% endif %}
{% if pay_at_pickup_warning %}
<p class="warning-banner">
  ⚠ You have {{ outstanding_cents | currency }} in outstanding fines. You can
  place holds, but checkout will be blocked at pickup until fines are paid.
</p>
{% endif %}
{% if not holds %}
  {{ empty_state("No active holds", "Reserve items from the catalog and they will appear here.", cta_href="/ui/catalog", cta_label="Browse catalog") }}
{% else %}
<table class="responsive-table">
  <thead>
    <tr><th>Title</th><th>Status</th><th>Queue</th><th>Expires</th><th>Action</th></tr>
  </thead>
  <tbody>
    {% for hold in holds %}
    <tr id="hold-{{ hold.id }}">
      <td data-label="Title"><a href="/ui/catalog/{{ hold.work_id }}">{{ hold.work.title }}</a></td>
      <td data-label="Status">
        {{ status_pill(hold.status) }}
        {% if hold.suspended_until %}
          <br><small><em>Suspended until {{ hold.suspended_until.isoformat() }}</em></small>
          {% if hold.suspended_reason %}<br><small>{{ hold.suspended_reason }}</small>{% endif %}
        {% endif %}
      </td>
      <td data-label="Queue">
        {% set pos = queue_positions.get(hold.id) %}
        {% if pos %}
          #{{ pos }}
        {% else %}—{% endif %}
      </td>
      <td data-label="Expires">{{ hold.expires_at.strftime("%Y-%m-%d") if hold.expires_at else "—" }}</td>
      <td data-label="" style="display:flex; gap:0.5rem; flex-wrap:wrap">
        {% if hold.status == "waiting" and not hold.suspended_until %}
        <form
          action="/ui/me/holds/{{ hold.id }}/suspend"
          method="post"
          style="margin:0; display:flex; gap:0.25rem; align-items:center; flex-wrap:wrap"
        >
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="date" name="until" required style="padding:0.2rem 0.4rem; margin:0">
          <button type="submit" class="outline" style="padding:0.2rem 0.6rem">Suspend</button>
        </form>
        {% elif hold.status == "waiting" and hold.suspended_until %}
        <form
          hx-post="/ui/me/holds/{{ hold.id }}/resume"
          hx-target="#hold-{{ hold.id }}"
          hx-swap="outerHTML"
          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">Resume</button>
        </form>
        {% endif %}
        <form
          hx-post="/ui/me/holds/{{ hold.id }}/cancel"
          hx-target="#hold-{{ hold.id }}"
          hx-swap="outerHTML"
          hx-include="[name='csrf_token']"
          style="margin:0"
        >
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button type="submit" class="outline contrast" style="padding:0.2rem 0.6rem">Cancel</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% endblock %}