{% if logs %}
  <div style="max-height: 300px; overflow-y: auto;">
    <table class="ht-table ht-table--striped ht-table--narrow ht-text-xs">
      <thead style="position: sticky;
                    top: 0;
                    background: var(--ht-surface-sticky);
                    z-index: 1">
        <tr>
          <th>Level</th>
          <th>Time</th>
          <th>App</th>
          <th>Message</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in logs | reverse %}
          <tr>
            <td>
              <span class="ht-badge ht-badge--sm {% if entry.level == 'DEBUG' %}ht-log-debug {% elif entry.level == 'INFO' %}ht-log-info {% elif entry.level == 'WARNING' %}ht-log-warning {% elif entry.level == 'ERROR' %}ht-log-error {% elif entry.level == 'CRITICAL' %}ht-log-critical {% endif %}">
                {{ entry.level }}
              </span>
            </td>
            <td class="ht-nowrap">
              {% if entry.timestamp %}
                <time x-data
                      x-text="new Date({{ entry.timestamp }} * 1000).toLocaleTimeString()"></time>
              {% else %}
                —
              {% endif %}
            </td>
            <td>
              {% if entry.app_key %}
                <a href="/ui/apps/{{ entry.app_key }}"><code>{{ entry.app_key }}</code></a>
              {% else %}
                <code>—</code>
              {% endif %}
            </td>
            <td>{{ entry.message | truncate(100) }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="ht-mt-3">
    <a href="/ui/logs" class="ht-btn ht-btn--sm ht-btn--link">View All</a>
  </div>
{% else %}
  <p class="ht-text-muted ht-text-xs">No recent logs.</p>
  <div class="ht-mt-3">
    <a href="/ui/logs" class="ht-btn ht-btn--sm ht-btn--link">View All</a>
  </div>
{% endif %}