{% extends 'layout.html' %}

{% block title %}Statusübersicht - Uptime Stats{% endblock %}

{% block content %}
<div class="container">
    <h1 class="mb-4">Statusübersicht</h1>

    {% if not monitors %}
        <div class="alert alert-info text-center">
            <h4>Noch keine Monitore konfiguriert.</h4>
            <p>Bitte fügen Sie im <a href="{{ url_for('admin.index') }}" class="alert-link">Admin-Bereich</a> einen Monitor hinzu, um mit der Überwachung zu beginnen.</p>
        </div>
    {% else %}
        <div class="row">
            {% for monitor in monitors %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title d-flex justify-content-between">
                            {{ monitor.name }}
                            
                            {# Manuelle Statusanzeige priorisieren #}
                            {% if monitor.status_override == 'MAINTENANCE' %}
                                <span class="badge bg-primary status-badge">Wartung <i class="bi bi-tools"></i></span>
                            {% elif monitor.status_override == 'DEGRADED' %}
                                <span class="badge bg-warning text-dark status-badge">Probleme <i class="bi bi-exclamation-triangle"></i></span>
                            {% elif monitor.status_override == 'OPERATIONAL' %}
                                <span class="badge bg-success status-badge">Funktionsfähig <i class="bi bi-check-circle"></i></span>

                            {# Automatische Statusanzeige, wenn kein manueller Status gesetzt ist #}
                            {% elif monitor.is_up == True %}
                                <span class="badge bg-success status-badge">Up <i class="bi bi-check-circle"></i></span>
                            {% elif monitor.is_up == False %}
                                <span class="badge bg-danger status-badge">Down <i class="bi bi-x-circle"></i></span>
                            {% else %}
                                <span class="badge bg-secondary status-badge">Unbekannt <i class="bi bi-question-circle"></i></span>
                            {% endif %}
                        </h5>

                        {# Status-Nachricht anzeigen, wenn vorhanden #}
                        {% if monitor.status_override_message %}
                            <div class="alert alert-info mt-2 p-2">
                                <small>{{ monitor.status_override_message }}</small>
                            </div>
                        {% endif %}

                        <p class="card-text">
                            {% if monitor.monitor_type == 'TCP' %}
                                <span class="text-muted text-break">{{ monitor.url }}:{{ monitor.port }}</span>
                            {% else %}
                                <a href="{{ monitor.url }}" target="_blank" class="text-muted text-break">{{ monitor.url }}</a>
                            {% endif %}
                        </p>
                        <div>
                            <span class="badge rounded-pill bg-primary">{{ monitor.monitor_type }}</span>
                            {% if monitor.monitor_type == 'KEYWORD' and monitor.keyword %}
                                <span class="badge rounded-pill bg-light text-dark">Keyword: {{ monitor.keyword }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        <small>Zuletzt geprüft: 
                            {% if monitor.last_checked != 'Nie' %}
                                {{ monitor.last_checked.strftime('%d.%m.%Y %H:%M:%S UTC') }}
                            {% else %}
                                Nie
                            {% endif %}
                        </small>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% endif %}
</div>
{% endblock %}