<div class="card shadow-sm  border-light" hx-get="{% url 'sonar_dumps' %}" hx-trigger="every 5s" hx-swap="outerHTML">
    <div class="card-header">
        <h5 class="card-title">Dumps</h5>
    </div>
    <div class="card-body">

        {% if not dumps %}
            <div class="text-light-grey">No dumps found</div>
        {% else %}
            <table class="table table-dashed table-hover">
                <thead>
                <tr>
                    <th scope="col">Dump</th>
                    <th scope="col" class="text-end">Happened</th>
                    <th class="w-50px text-end">&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                {% for dump in dumps %}
                <tr class="align-middle">
                    <td><code>{{ dump.data|safe }}</code></td>
                    <td class="text-end">{{ dump.created_at|timesince }}</td>
                    <td class="w-50px text-end">
                        <a class="btn btn-sm btn-icon btn-primary">
                            <i class="bi bi-arrow-right"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}

    </div>
</div>