{% 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">Logs</h5>
    </div>
    <div class="card-body">
        {% if not logs %}
            <div class="empty-state">
                <i class="bi bi-journal-text"></i>
                <div>No logs found</div>
            </div>
        {% else %}
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">Level</th>
                    <th scope="col">Logger</th>
                    <th scope="col">Message</th>
                    <th scope="col">Context</th>
                    <th scope="col" class="text-end">Happened</th>
                </tr>
                </thead>
                <tbody>
                {% for log in logs %}
                <tr>
                    <td>
                        {% with log_level=log.data.level|default:'info' %}
                            <span class="badge rounded-pill {{ log_level|sonar_level_badge_class }}">{{ log_level }}</span>
                        {% endwith %}
                    </td>
                    <td><code>{{ log.data.logger|default:'root' }}</code></td>
                    <td>{{ log.data.message|default:'-'|truncatechars:120 }}</td>
                    <td>
                        {% if log.data.context %}
                            <code class="text-wrap">{{ log.data.context|truncatechars:120 }}</code>
                        {% elif log.data.extra %}
                            <code class="text-wrap">{{ log.data.extra|truncatechars:120 }}</code>
                        {% else %}
                            <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-muted">{{ log.created_at|timesince }} ago</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</div>