indie-status-page/app/templates/status.html

{% extends "base.html" %}
{% block title %}Status{% endblock %}
{% block content %}
<div class="status-page">
    <section class="overall-status">
        {% if has_active_incidents %}
        <div class="status-banner status-banner--major">Active Incident</div>
        {% else %}
        <div class="status-banner status-banner--operational">All Systems Operational</div>
        {% endif %}
    </section>

    <section class="services">
        {% for group_name, group_services in services_by_group.items() %}
        <h2>{{ group_name or "Services" }}</h2>
        {% for service in group_services %}
        <div class="service-row">
            <span class="service-name">{{ service.name }}</span>
            <span class="service-status {% if service.current_status == 'up' %}status-up{% elif service.current_status == 'down' %}status-down{% else %}status-degraded{% endif %}">
                {{ service.current_status | title }}
            </span>
        </div>
        {% endfor %}
        {% endfor %}
    </section>

    {% if incidents %}
    <section class="incidents">
        <h2>Recent Incidents</h2>
        {% for incident in incidents %}
        <div class="incident-card">
            <h3><a href="/incident/{{ incident.id }}">{{ incident.title }}</a></h3>
            <span class="severity severity-{{ incident.severity }}">{{ incident.severity | title }}</span>
            <span class="incident-status">{{ incident.status | title }}</span>
            <p class="timestamp">{{ incident.started_at }}</p>
        </div>
        {% endfor %}
    </section>
    {% endif %}

    <section class="subscribe">
        <p>Get notified when incidents occur:</p>
        <form action="/subscribe" method="POST">
            <input type="email" name="email" placeholder="you@example.com" required>
            <button type="submit">Subscribe</button>
        </form>
    </section>
</div>
{% endblock %}