function LiveTable({ rows }) {
  return (
    <table className="lb night">
      <thead>
        <tr>
          <th style={{ width: 50 }}>POS</th>
          <th style={{ width: 60 }}>BIB</th>
          <th>NAME</th>
          <th>WAVE</th>
          <th className="num">SPLIT 3</th>
          <th className="num">GAP TO LEAD</th>
          <th className="num">PACE</th>
          <th className="num">LAST</th>
        </tr>
      </thead>
      <tbody>
        {rows.map(r => (
          <tr key={r.pos}>
            <td style={{ fontWeight: 700, color: r.pos === 1 ? 'var(--flag)' : 'var(--night-fg)', fontSize: 14 }}>{r.pos}</td>
            <td>{r.bib}</td>
            <td className="name" style={{ color: 'var(--night-fg)' }}>{r.name}</td>
            <td style={{ color: 'var(--night-fg-2)' }}>{r.wave}</td>
            <td className="num">{r.split}</td>
            <td className={'num ' + (r.gap === '—' ? '' : 'loss')}>{r.gap}</td>
            <td className="num">{r.pace}</td>
            <td className="num" style={{ color: 'var(--night-fg-3)' }}>{r.last}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
window.LiveTable = LiveTable;