{% extends "base.html" %}
{% block title %}System Monitor Alerts - Hermetic Suite{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="system_monitor">System Monitor Alerts</h1>
    <p class="subtitle">View and manage system alerts</p>
    <div class="header-actions">
        <a href="{{ url_for('system_monitor.index') }}" class="btn btn-secondary">← Back to Dashboard</a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Filters</h2>
    </div>
    <div class="card-body">
        <form action="{{ url_for('system_monitor.alerts_list') }}" method="GET" class="inline-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="server_id">Server</label>
                    <select id="server_id" name="server_id">
                        <option value="">All Servers</option>
                        {% for server in servers %}
                        <option value="{{ server.id }}" {% if selected_server_id == server.id %}selected{% endif %}>
                            {{ server.hostname or server.ip_address }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="checkbox-label" style="margin-top: 1.75rem;">
                        <input type="checkbox" name="resolved" value="true" {% if show_resolved %}checked{% endif %}>
                        Show resolved alerts
                    </label>
                </div>
                <div class="form-group" style="margin-top: 1.5rem;">
                    <button type="submit" class="btn btn-primary">Apply Filters</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>
            {% if show_resolved %}
            All Alerts
            {% else %}
            Active Alerts
            {% endif %}
        </h2>
    </div>
    <div class="card-body">
        {% if alerts %}
        <table class="table">
            <thead>
                <tr>
                    <th>Server</th>
                    <th>Severity</th>
                    <th>Metric</th>
                    <th>Message</th>
                    <th>Value</th>
                    <th>Triggered</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for alert in alerts %}
                <tr class="{% if alert.is_active %}alert-active{% endif %}">
                    <td>
                        <a href="{{ url_for('system_monitor.server_detail', server_id=alert.server_id) }}">
                            Server #{{ alert.server_id }}
                        </a>
                    </td>
                    <td>
                        <span class="badge badge-{{ 'critical' if alert.severity == 'critical' else 'warning' }}">
                            {{ alert.severity|upper }}
                        </span>
                    </td>
                    <td>{{ alert.metric_type }}{{ ' (' + alert.metric_path + ')' if alert.metric_path else '' }}</td>
                    <td>{{ alert.message }}</td>
                    <td>
                        {% if alert.current_value is not none %}
                        {{ alert.current_value|round(1) }} / {{ alert.threshold_value|round(1) }}
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td>
                        {{ alert.triggered_at.strftime('%Y-%m-%d %H:%M') }}
                        <br>
                        <small class="text-muted">
                            {% set delta = (now() - alert.triggered_at).total_seconds() %}
                            {% if delta < 3600 %}
                            {{ (delta / 60)|int }} min ago
                            {% elif delta < 86400 %}
                            {{ (delta / 3600)|int }} hours ago
                            {% else %}
                            {{ (delta / 86400)|int }} days ago
                            {% endif %}
                        </small>
                    </td>
                    <td>
                        {% if alert.is_active %}
                        <span class="badge badge-danger">Active</span>
                        {% if alert.acknowledged_at %}
                        <br><small class="text-muted">Ack'd by {{ alert.acknowledged_by }}</small>
                        {% endif %}
                        {% else %}
                        <span class="badge badge-secondary">Resolved</span>
                        {% if alert.resolved_at %}
                        <br><small class="text-muted">{{ alert.resolved_at.strftime('%m-%d %H:%M') }}</small>
                        {% endif %}
                        {% endif %}
                    </td>
                    <td>
                        {% if alert.is_active %}
                        {% if not alert.acknowledged_at %}
                        <form action="{{ url_for('system_monitor.acknowledge_alert', alert_id=alert.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-secondary">Acknowledge</button>
                        </form>
                        {% endif %}
                        <form action="{{ url_for('system_monitor.resolve_alert', alert_id=alert.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-success">Resolve</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <p>
                {% if show_resolved %}
                No alerts found.
                {% else %}
                No active alerts. 🎉
                {% endif %}
            </p>
        </div>
        {% endif %}
    </div>
</div>

<style>
.alert-active {
    background: rgba(220, 53, 69, 0.05);
}

.inline-form .form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
</style>

{% macro now() %}{{ import_datetime().utcnow() }}{% endmacro %}
{% endblock %}