{% if events %}
    <ul class="event-list">
    {% for event in events %}
        <li class="event-item">
            <span class="event-time" data-timestamp="{{ event.timestamp }}"></span>
            <span class="event-msg">{{ event.message }}</span>
        </li>
    {% endfor %}
    </ul>
    <script>
        document.querySelectorAll('.event-time[data-timestamp]').forEach(el => {
            if (!el.textContent) {
                const ts = parseFloat(el.dataset.timestamp);
                const d = new Date(ts * 1000);
                el.textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
            }
        });
    </script>
{% else %}
    <div class="text-center text-muted"><small>No events yet.</small></div>
{% endif %}