{% load bootstrap4 static %}
<div class="table-responsive">
    <table class="table table-hover">
        <thead class="thead-light">
            <tr>
                <th>Message</th>
                <th>Date</th>
                <th>From</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for alert in alerts %}
            <tr>
                <td><a href="{{ alert.url }}">{{ alert.identifier }}</a></td>
                <td>{{ alert.timestamp }}</td>
                <td>{{ alert.from }}</td>
                <td data-toggle="tooltip" title="{{ alert.subject }}" data-delay="0">{{ alert.subject|truncatechars:50 }}</td>
            </tr>
            {% endfor %}
            <tr>
                <th><a href="{{ superevent_alert.url }}">{{ superevent_alert.identifier }}</a></th>
                <th>{{ superevent_alert.timestamp }}</th>
                <th>LIGO</th>
                <th>{{ superevent_alert.parsed_message.notice_type }} {{ superevent_alert.parsed_message.sequence_num }}</th>
            </tr>
        </tbody>
    </table>
</div>