{% if not violations %}
  <div class="kpi-card text-slate-500 text-sm">No violations match these filters.</div>
{% else %}
  {# Build the lag-sort URL preserving current filters #}
  {% set lag_qs = [] %}
  {% if filter_ticker %}{% set _ = lag_qs.append('ticker=' ~ filter_ticker) %}{% endif %}
  {% if filter_account %}{% set _ = lag_qs.append('account=' ~ filter_account) %}{% endif %}
  {% if filter_year %}{% set _ = lag_qs.append('year=' ~ filter_year) %}{% endif %}
  {% if filter_confidence %}{% set _ = lag_qs.append('confidence=' ~ filter_confidence) %}{% endif %}
  {% set _ = lag_qs.append('sort=lag') %}
  {% set _ = lag_qs.append('order=' ~ next_lag_order) %}
  {% set lag_url = '/detail?' ~ lag_qs|join('&') %}

  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    {% for g in groups %}
      <div x-data="{ open: {{ 'true' if expand_default else 'false' }} }" class="border-b border-slate-200 last:border-b-0">
        <button type="button" @click="open = !open"
                class="w-full flex justify-between items-center px-3 py-2 text-left hover:bg-slate-50">
          <div class="flex items-center gap-2">
            <span x-text="open ? '▾' : '▸'" class="text-slate-400 font-mono"></span>
            <a href="/ticker/{{ g.ticker }}" class="font-mono text-primary underline">{{ g.ticker }}</a>
            <span class="text-xs text-slate-500">{{ g.violation_count }} violation{{ '' if g.violation_count == 1 else 's' }}</span>
          </div>
          <div class="text-sm font-mono text-confirmed">${{ "%.2f"|format(g.disallowed_total|float) }}</div>
        </button>

        <div x-show="open" x-cloak>
          <table class="w-full text-sm">
            <thead class="text-left text-xs text-slate-500 uppercase border-t border-slate-200">
              <tr>
                <th class="px-3 py-2 w-28">Loss date</th>
                <th class="px-3 py-2">Loss → Buy</th>
                <th class="px-3 py-2 w-28">Trigger date</th>
                <th class="px-3 py-2 w-20">
                  <a href="{{ lag_url }}" class="hover:underline">Lag {% if sort == 'lag' %}{{ '▼' if order == 'desc' else '▲' }}{% endif %}</a>
                </th>
                <th class="px-3 py-2 w-28 text-right">Disallowed</th>
                <th class="px-3 py-2 w-20 text-right">Matched qty</th>
                <th class="px-3 py-2 w-28">Confidence</th>
                <th class="px-3 py-2 w-32">Source</th>
              </tr>
            </thead>
            <tbody>
              {% for v in g.violations %}
                {% set lag = lag_days(v) %}
                {% set src = source_label(v) %}
                <tr class="border-t border-slate-100 hover:bg-slate-50">
                  <td class="px-3 py-2 font-mono">{{ v.loss_sale_date or "—" }}</td>
                  <td class="px-3 py-2">{{ v.loss_account or "—" }} → {{ v.buy_account or "—" }}</td>
                  <td class="px-3 py-2 font-mono">{{ v.triggering_buy_date or "—" }}</td>
                  <td class="px-3 py-2 font-mono">{% if lag is not none %}{{ lag }}d{% else %}—{% endif %}</td>
                  <td class="px-3 py-2 font-mono text-right text-confirmed">${{ "%.2f"|format(v.disallowed_loss) }}</td>
                  <td class="px-3 py-2 font-mono text-right">{{ v.matched_quantity }}</td>
                  <td class="px-3 py-2"><span class="badge-{{ v.confidence|lower }}">{{ v.confidence }}</span></td>
                  <td class="px-3 py-2">
                    {% if src == "Schwab" %}
                      <span class="text-slate-700 bg-slate-200 text-xs font-medium px-2 py-0.5 rounded">{{ src }}</span>
                    {% elif src == "Cross-account" %}
                      <span class="text-amber-800 bg-amber-100 text-xs font-medium px-2 py-0.5 rounded">{{ src }}</span>
                    {% else %}
                      <span class="text-blue-800 bg-blue-100 text-xs font-medium px-2 py-0.5 rounded">{{ src }}</span>
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}