{% for card in running %}
<tr class="hover:bg-gray-50/50 transition-colors">
  <td class="pl-5 py-3.5">
    <div class="w-2.5 h-2.5 rounded-full {{ 'bg-amber-400 ring-4 ring-amber-50' if card.status == 'unhealthy' else 'bg-emerald-400 ring-4 ring-emerald-50' }}"></div>
  </td>
  <td class="px-5 py-3.5">
    <div class="text-[13px] text-gray-900 font-medium">{{ card.name }}</div>
    <div class="text-[11px] text-gray-400 font-mono">{{ card.benchmark_id }}</div>
  </td>
  <td class="px-5 py-3.5">
    <div class="flex items-center gap-2">
      <div class="w-6 h-6 rounded-md bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center flex-shrink-0">
        <span class="text-[9px] font-bold text-gray-500">{{ (card.team_name or '—')[:2] | upper }}</span>
      </div>
      <span class="text-[12px] text-gray-700 font-medium">{{ card.team_name }}</span>
    </div>
  </td>
  <td class="px-5 py-3.5">
    {% if card.entrypoint %}
    {% for ep in card.entrypoint %}
    <a href="http://{{ ep }}" target="_blank" class="block text-[12px] font-mono text-blue-600 hover:text-blue-700 hover:underline">{{ ep }}</a>
    {% endfor %}
    {% else %}
    <span class="text-[12px] text-gray-400">—</span>
    {% endif %}
  </td>
  <td class="px-5 py-3.5">
    {% if card.status == 'unhealthy' %}
    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-full bg-amber-50 text-amber-600 border border-amber-100">
      <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span> 异常
    </span>
    {% else %}
    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100">
      <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span> running
    </span>
    {% endif %}
  </td>
  <td class="px-5 py-3.5 text-right">
    <button
      hx-post="/api/stop_challenge"
      hx-vals='{"code": "{{ card.benchmark_id }}"}'
      hx-swap="none"
      hx-on::after-request="
        $dispatch('toast', {type:'success', message:'已停止'});
        htmx.ajax('GET', '/web/partials/status_table', '#status-table-body');
      "
      class="text-[12px] text-gray-500 hover:text-gray-700 font-medium cursor-pointer">停止</button>
    {% if card.entrypoint %}
    <a href="http://{{ card.entrypoint[0] }}" target="_blank" class="ml-3 text-[12px] text-emerald-600 hover:text-emerald-700 font-medium">访问</a>
    {% endif %}
  </td>
</tr>
{% endfor %}

{% if stopped %}
<tr>
  <td colspan="6" class="px-5 py-2" x-data="{expanded: false}">
    <button @click="expanded = !expanded" class="text-[12px] text-gray-500 hover:text-gray-700 cursor-pointer">
      <span x-text="expanded ? '▾' : '▸'"></span> 已停止/无实例 ({{ stopped|length }})
    </button>
    <table x-show="expanded" class="w-full mt-2">
      <tbody class="divide-y divide-gray-50">
        {% for card in stopped %}
        <tr class="hover:bg-gray-50/50 transition-colors">
          <td class="pl-5 py-2.5 w-8">
            <div class="w-2.5 h-2.5 rounded-full bg-gray-300 ring-4 ring-gray-50"></div>
          </td>
          <td class="px-5 py-2.5">
            <div class="text-[13px] text-gray-900">{{ card.name }}</div>
          </td>
          <td class="px-5 py-2.5">
            <div class="flex items-center gap-2">
              <div class="w-6 h-6 rounded-md bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center flex-shrink-0">
                <span class="text-[9px] font-bold text-gray-500">{{ (card.team_name or '—')[:2] | upper }}</span>
              </div>
              <span class="text-[12px] text-gray-500">{{ card.team_name }}</span>
            </div>
          </td>
          <td class="px-5 py-2.5 text-[12px] text-gray-400">—</td>
          <td class="px-5 py-2.5">
            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-full bg-gray-50 text-gray-500 border border-gray-200">
              <span class="w-1.5 h-1.5 rounded-full bg-gray-300"></span> stopped
            </span>
          </td>
          <td class="px-5 py-2.5"></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </td>
</tr>
{% endif %}