{% load sonar_badges %}

<div class="card" hx-get="{{ panel.get_list_url }}" hx-trigger="every 5s" hx-swap="outerHTML">
    <div class="card-header">
        <h5 class="card-title">Events</h5>
    </div>
    <div class="card-body">
        {% if not events %}
            <div class="empty-state">
                <i class="bi bi-calendar-event"></i>
                <div>No events found</div>
            </div>
        {% else %}
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Level</th>
                    <th scope="col">Event Data</th>
                    <th scope="col">Tags</th>
                    <th scope="col" class="text-end">Happened</th>
                </tr>
                </thead>
                <tbody>
                {% for event in events %}
                <tr>
                    <td>{{ event.data.name|default:'(unnamed)' }}</td>
                    <td>
                        {% with event_level=event.data.level|default:'info' %}
                            <span class="badge rounded-pill {{ event_level|sonar_level_badge_class }}">{{ event_level }}</span>
                        {% endwith %}
                    </td>
                    <td>
                        {% with event_payload=event.data.payload %}
                            {% if event_payload %}
                                <code class="text-wrap">{{ event_payload|truncatechars:120 }}</code>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        {% endwith %}
                    </td>
                    <td>
                        {% if event.data.tags %}
                            {{ event.data.tags|join:', ' }}
                        {% else %}
                            <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-muted">{{ event.created_at|timesince }} ago</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</div>