{% extends "base.html.j2" %}
{% from 'bootstrap5/form.html' import render_form %}

{% block content %}
    <h1 class="h2 mt-3">Alarms</h1>

    <div class="table-responsive">
        <table class="table table-sm">
            <thead>
            <tr>
                <th scope="col">Resource</th>
                <th scope="col">Type</th>
                <th scope="col">State</th>
                <th scope="col">Message</th>
                <th scope="col">Last Update</th>
            </tr>
            </thead>
            <tbody>
            {% for alarm in alarms %}
                <tr class="bg-{% if alarm.alarm_state.name == "OK" %}success{% elif alarm.alarm_state.name == "UNKNOWN" %}dark{% else %}danger{% endif %} text-light">
                    {% if alarm.target == "proxy" %}
                        <td>Proxy: {{ alarm.proxy.url }} ({{ alarm.proxy.origin.domain_name }})</td>
                    {% elif alarm.target == "origin" %}
                        <td>Origin: {{ alarm.origin.domain_name }}</td>
                    {% elif alarm.target == "service/cloudfront" %}
                        <td>AWS CloudFront</td>
                    {% endif %}
                    <td>{{ alarm.alarm_type }}</td>
                    <td>{{ alarm.alarm_state.name }}</td>
                    <td>{{ alarm.text }}</td>
                    <td>{{ alarm.last_updated | format_date }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}