{% if approvals %}
<div class="grid gap-4">
  {% for a in approvals %}
  <div class="card bg-base-100 shadow-sm" id="approval-{{ a.id }}">
    <div class="card-body">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="card-title text-lg">{{ a.title }}</h3>
          <p class="text-base-content/60 text-sm">{{ a.reason }}</p>
          <div class="mt-2 flex gap-2">
            <span class="badge {{ a.type.value|status_badge }} badge-sm">{{ a.type.value }}</span>
            {% if a.proposed_by %}
            <span class="text-xs text-base-content/40">by {{ a.proposed_by }}</span>
            {% endif %}
          </div>
        </div>
        <div class="flex gap-2">
          <button class="btn btn-success btn-sm"
                  hx-post="/api/approvals/{{ a.id }}"
                  hx-ext="json-enc"
                  hx-vals='{"approved": true}'
                  hx-target="#approvals-container"
                  hx-on::after-request="htmx.ajax('GET', '/partials/approvals-list', '#approvals-container')">
            Approve
          </button>
          <button class="btn btn-error btn-sm"
                  hx-post="/api/approvals/{{ a.id }}"
                  hx-ext="json-enc"
                  hx-vals='{"approved": false}'
                  hx-target="#approvals-container"
                  hx-on::after-request="htmx.ajax('GET', '/partials/approvals-list', '#approvals-container')">
            Reject
          </button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="text-center py-12 text-base-content/50">
  No pending approvals.
</div>
{% endif %}