{# Reusable per-subject event card.

   Caller passes:
     - ``events`` -- iterable of bty.web._events_log.Event
     - ``title`` -- card title (e.g. "Recent activity")
     - ``link_to_full`` -- /ui/events URL (with subject filter applied)
       so the operator can drill into the full timeline.
     - ``card_id`` -- optional id on the card so an in-page sub-nav
       "Activity" anchor can jump to it.

   Always renders (an empty-state row when there are no events) so the
   "Activity" sub-nav anchor always has a target and the table is a
   stable fixture on the page.
#}
<div class="card mb-3"{% if card_id %} id="{{ card_id }}"{% endif %}>
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="bi bi-clock-history me-1"></i>{{ title }}</span>
        {% if link_to_full %}
        <a href="{{ link_to_full }}" class="text-decoration-none small">
            full timeline <i class="bi bi-arrow-right"></i>
        </a>
        {% endif %}
    </div>
    <div class="table-responsive">
        <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 1%; white-space: nowrap;">When</th>
                    <th style="width: 1%; white-space: nowrap;">Kind</th>
                    <th>Summary</th>
                    <th style="width: 1%; white-space: nowrap;">Source IP</th>
                </tr>
            </thead>
            <tbody>
                {% for e in events %}
                <tr>
                    <td><small class="text-muted" title="{{ e.ts }}">{{ e.ts | fmt_ts }}</small></td>
                    <td>
                        {% set family = e.kind.split('.')[0] %}
                        {% set badge_map = {
                            'machine': 'bg-info text-dark',
                            'image': 'bg-primary',
                            'catalog': 'bg-secondary',
                            'boot': 'bg-warning text-dark',
                            'settings': 'bg-dark',
                            'auth': 'bg-success',
                        } %}
                        {% if e.kind.endswith('.failed') or e.kind.endswith('_failed') %}
                        {% set badge = 'bg-danger' %}
                        {% else %}
                        {% set badge = badge_map.get(family, 'bg-light text-dark border') %}
                        {% endif %}
                        <span class="badge {{ badge }} small">{{ e.kind }}</span>
                    </td>
                    <td><small>{{ e.summary | linkify }}</small></td>
                    <td>
                        {% if e.source_ip %}
                        <a class="text-decoration-none"
                           href="/ui/events?source_ip={{ e.source_ip|urlencode }}"
                           title="Filter by this IP">
                            <code class="small">{{ e.source_ip }}</code>
                        </a>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not events %}
                <tr>
                    <td colspan="4" class="text-muted small">
                        No activity yet. Events appear here as machines check
                        in, operators make changes, and background jobs run.
                    </td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>