{% extends "base.html" %}
{% block content %}

<h2 class="d-flex justify-content-between align-items-center">
    Dashboard
    <span id="dashboard-timer" class="badge bg-success">
        Nächste Prüfung in -- Sekunden
    </span>
</h2>
<div class="container">
    {% set current_prefix = None %}
    <div class="row row-cols-1 row-cols-md-6 g-3">
    {% for d in devices %}
        {% set prefix = d[1][:3] %} {# die ersten 3 Buchstaben #}
        
        {% if current_prefix != prefix %}
            {% if not loop.first %}
                </div> {# vorige Reihe schließen #}
            {% endif %}
            <div class="row row-cols-1 row-cols-md-6 g-3"> {# neue Reihe starten #}
            {% set current_prefix = prefix %}
        {% endif %}

        <div class="col">
            <div class="card text-center p-2"
                 {% if last_seen.get(d[0]) %} title="{{ last_seen[d[0]] }}" 
                 {% elif status[d[0]] == 'offline' %} title="Noch nie online" {% endif %}>
                <div class="card-header">{{ d[1] }}</div>
                <div class="card-body">
                    <span class="fw-bold" style="color: 
                        {% if d[2] == 0 %}gray
                        {% elif status[d[0]] == 'online' %}green
                        {% else %}red
                        {% endif %};">
                        {% if d[2] == 0 %}
                            Deaktiviert
                        {% else %}
                            {% if status[d[0]] %}{{ status[d[0]]|capitalize }}{% else %}Unbekannt{% endif %}
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>

        {% if loop.last %}
            </div> {# letzte Reihe schließen #}
        {% endif %}
    {% endfor %}
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
    const intervalMinutes = {{ interval | int }}; // aus DB
    const intervalMilliseconds = intervalMinutes * 60 * 1000;
    let lastUpdateTime = Date.now();

    function parseLogTimestamp(ts) {
        const parts = ts.match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
        if (!parts) return Date.now();
        const [, year, month, day, hour, minute, second] = parts.map(Number);
        return new Date(year, month - 1, day, hour, minute, second).getTime();
    }

    function updateTimer() {
        const now = Date.now();
        const elapsed = now - lastUpdateTime;
        const remainingMs = intervalMilliseconds - (elapsed % intervalMilliseconds);
        const remainingSec = Math.ceil(remainingMs / 1000);
        document.getElementById("dashboard-timer").innerText =
            `Nächste Prüfung in ${remainingSec} Sekunden`;

        if (remainingSec <= 1) {
            // Timer abgelaufen → Reload starten
            window.location.reload();
        }
    }

    function fetchLastLog() {
        fetch("{{ url_for('get_log') }}")
            .then(response => response.text())
            .then(data => {
                const lines = data.split("\n");
                let lastSepIndex = -1;
                for (let i = lines.length - 1; i >= 0; i--) {
                    if (lines[i].startsWith("--------------------------------------------------------------------")) {
                        lastSepIndex = i;
                        break;
                    }
                }
                if (lastSepIndex >= 0 && lastSepIndex + 1 < lines.length) {
                    const firstLine = lines[lastSepIndex + 1];
                    const match = firstLine.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
                    if (match) lastUpdateTime = parseLogTimestamp(match[1]);
                }
            })
            .catch(err => console.error("Fehler beim Laden der Logs:", err));
    }

    // Timer alle 1 Sekunde aktualisieren
    setInterval(updateTimer, 1000);

    // einmal beim Laden die letzte Log-Zeit setzen
    fetchLastLog();
});
</script>

{% endblock %}