{% comment %}
Responsive data-table wrapper — renders the table on md+ and a card-stack
fallback on mobile so RIMS list views don't blow past the viewport.

Caller passes the full rendered table_html and the same rows as a list of
dicts {title, subtitle?, badges?, meta?, href?, amount?, amount_hint?,
actions?} so the mobile stack stays in sync with table headers.

For most list views the cleaner path is to use approval_queue.html, which
already includes both layouts. responsive_table is for cases where the
existing table markup is complex enough that re-shaping it into the
approval_queue contract isn't worth it — drop the table HTML in unchanged
and provide row dicts for the mobile fallback.

Args:
  table_html : pre-rendered <table> markup (use {% include %} for the rows)
  rows       : list of dicts matching approval_queue items contract
  empty_state: optional dict for empty rendering
{% endcomment %}
{% if rows or table_html %}
  <div class="hidden md:block">
    {{ table_html|safe }}
  </div>
  <div class="md:hidden space-y-3">
    {% for row in rows %}
      <article class="card">
        <div class="card-section space-y-2">
          <div class="flex items-baseline justify-between gap-3">
            {% if row.href %}
              <a href="{{ row.href }}" class="font-display text-sm font-semibold text-ruforum-text hover:text-ruforum-primary">{{ row.title }}</a>
            {% else %}
              <p class="font-display text-sm font-semibold text-ruforum-text">{{ row.title }}</p>
            {% endif %}
            {% if row.amount %}<p class="font-semibold tabular-nums text-ruforum-text">{{ row.amount }}</p>{% endif %}
          </div>
          {% if row.subtitle %}<p class="text-xs text-ruforum-text-muted">{{ row.subtitle }}</p>{% endif %}
          {% if row.badges %}
            <div class="flex flex-wrap gap-1.5">
              {% for b in row.badges %}<span class="badge badge-{{ b.variant|default:'neutral' }}">{{ b.label }}</span>{% endfor %}
            </div>
          {% endif %}
          {% if row.meta %}
          <dl class="grid gap-1 text-[11px] text-ruforum-text-muted">
            {% for m in row.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 %}
        </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 %}