{% comment %}
RIMS approval queue — the shared list-of-pending-items table used by:
  • finance: disbursement_approval_queue
  • grants:  funding_approval_queue
  • grants:  review_queue

Each row carries its own decision action (modal or link). The mobile fallback
renders the same rows as stacked cards so small screens stay usable.

Args:
  items       : iterable of dicts/objects with:
    title       (str)
    subtitle    (str|None)
    href        (str|None)        — row click target (detail page)
    badges      (list of dicts {label, variant}) — small chips inline
    meta        (list of dicts {label, value})   — definition-list rows
    amount      (str|None)        — large value emphasised top-right
    amount_hint (str|None)
    actions     (list of {label, url, variant, modal?}) — per-row CTAs
  empty_state : optional dict {heading, subtext, primary_url, primary_label}
                rendered when items is empty.
{% endcomment %}
{% if items %}
<div class="hidden md:block">
  <div class="card overflow-hidden">
    <ul class="divide-y divide-ruforum-border">
      {% for it in items %}
      <li class="px-6 py-4 hover:bg-ruforum-surface-warm/50 transition-colors">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div class="min-w-0 flex-1 space-y-2">
            <div class="flex flex-wrap items-baseline gap-2">
              {% if it.href %}
                <a href="{{ it.href }}" class="font-display text-base font-semibold text-ruforum-text hover:text-ruforum-primary">{{ it.title }}</a>
              {% else %}
                <p class="font-display text-base font-semibold text-ruforum-text">{{ it.title }}</p>
              {% endif %}
              {% for badge in it.badges %}
                <span class="badge badge-{{ badge.variant|default:'neutral' }}">{{ badge.label }}</span>
              {% endfor %}
            </div>
            {% if it.subtitle %}<p class="text-sm text-ruforum-text-muted">{{ it.subtitle }}</p>{% endif %}
            {% if it.meta %}
            <dl class="grid gap-x-6 gap-y-1 text-xs text-ruforum-text-muted sm:grid-cols-2 lg:grid-cols-3">
              {% for m in it.meta %}
              <div class="flex items-baseline gap-1.5">
                <dt class="shrink-0">{{ m.label }}:</dt>
                <dd class="font-medium text-ruforum-text">{{ m.value }}</dd>
              </div>
              {% endfor %}
            </dl>
            {% endif %}
          </div>
          <div class="flex shrink-0 flex-col items-end gap-2 text-right">
            {% if it.amount %}
              <p class="font-display text-lg font-semibold tabular-nums text-ruforum-text">{{ it.amount }}</p>
              {% if it.amount_hint %}<p class="text-[11px] text-ruforum-text-muted">{{ it.amount_hint }}</p>{% endif %}
            {% endif %}
            {% if it.actions %}
            <div class="flex flex-wrap items-center justify-end gap-2">
              {% for action in it.actions %}
                {% if action.modal %}
                  <button type="button"
                          class="btn-{{ action.variant|default:'secondary' }} btn-sm"
                          data-modal-target="{{ action.modal }}">{{ action.label }}</button>
                {% else %}
                  <a href="{{ action.url }}" class="btn-{{ action.variant|default:'secondary' }} btn-sm">{{ action.label }}</a>
                {% endif %}
              {% endfor %}
            </div>
            {% endif %}
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
<div class="md:hidden space-y-3">
  {% for it in items %}
  <article class="card">
    <div class="card-section space-y-2">
      <div class="flex items-baseline justify-between gap-3">
        {% if it.href %}
          <a href="{{ it.href }}" class="font-display text-sm font-semibold text-ruforum-text hover:text-ruforum-primary">{{ it.title }}</a>
        {% else %}
          <p class="font-display text-sm font-semibold text-ruforum-text">{{ it.title }}</p>
        {% endif %}
        {% if it.amount %}<p class="font-semibold tabular-nums text-ruforum-text">{{ it.amount }}</p>{% endif %}
      </div>
      {% if it.subtitle %}<p class="text-xs text-ruforum-text-muted">{{ it.subtitle }}</p>{% endif %}
      {% if it.badges %}
        <div class="flex flex-wrap gap-1.5">
          {% for badge in it.badges %}
            <span class="badge badge-{{ badge.variant|default:'neutral' }}">{{ badge.label }}</span>
          {% endfor %}
        </div>
      {% endif %}
      {% if it.meta %}
      <dl class="grid gap-1 text-[11px] text-ruforum-text-muted">
        {% for m in it.meta %}
        <div class="flex items-baseline gap-1.5">
          <dt>{{ m.label }}:</dt>
          <dd class="font-medium text-ruforum-text">{{ m.value }}</dd>
        </div>
        {% endfor %}
      </dl>
      {% endif %}
      {% if it.actions %}
      <div class="flex flex-wrap items-center gap-2 pt-1">
        {% for action in it.actions %}
          {% if action.modal %}
            <button type="button"
                    class="btn-{{ action.variant|default:'secondary' }} btn-sm w-full justify-center"
                    data-modal-target="{{ action.modal }}">{{ action.label }}</button>
          {% else %}
            <a href="{{ action.url }}" class="btn-{{ action.variant|default:'secondary' }} btn-sm w-full justify-center text-center">{{ action.label }}</a>
          {% endif %}
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </article>
  {% endfor %}
</div>
{% else %}
  {% include "components/empty_state.html" with heading=empty_state.heading subtext=empty_state.subtext primary_url=empty_state.primary_url primary_label=empty_state.primary_label icon_path=empty_state.icon_path %}
{% endif %}