{# demo_log/partials/list.html – Read-only Log-Liste #}

<div class="page-header">
  <div class="page-header-main">
    <div class="page-title">Demo Log</div>
  </div>
</div>

<div class="ds-card on" style="overflow: hidden;">
  <div style="overflow-x: auto;">
    <table style="width: 100%; border-collapse: collapse; font-size: 12.5px;">
      <thead>
        <tr>
          {% for col in ['Zeitpunkt', 'Level', 'Meldung'] %}
          <th style="padding: 9px 14px; text-align: left; font-size: 11px;
                     text-transform: uppercase; letter-spacing: 0.05em;
                     color: var(--text-3); font-weight: 600; white-space: nowrap;
                     border-bottom: 1px solid var(--border-s);">{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for entry in entries %}
        <tr style="border-bottom: 1px solid var(--border-s);">
          <td style="padding: 8px 14px; white-space: nowrap; color: var(--text-3); font-size: 12px;">
            {{ entry.ts }}
          </td>
          <td style="padding: 8px 14px; white-space: nowrap;">
            <span style="
              font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
              {% if entry.level == 'ERROR' %}background: var(--red-bg, #fee2e2); color: var(--red, #dc2626);
              {% elif entry.level == 'WARN' %}background: var(--yellow-bg, #fef9c3); color: var(--yellow, #ca8a04);
              {% else %}background: var(--green-bg, #dcfce7); color: var(--green, #16a34a);{% endif %}
            ">{{ entry.level }}</span>
          </td>
          <td style="padding: 8px 14px;">{{ entry.message }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>