{% extends "base.html" %}
{% block title %}Dashboard - Busylight{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Dashboard</h4>
    <div>
        <form method="post" action="/api/poll" class="d-inline">
            <button type="submit" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-arrow-clockwise"></i> Jetzt abfragen
            </button>
        </form>
        <span class="text-muted ms-2" id="last-update"></span>
    </div>
</div>

{% if not authenticated %}
<div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle"></i>
    Azure ist nicht verbunden. Bitte unter <a href="/settings">Einstellungen</a> konfigurieren und
    <code>python app.py --auth</code> ausfuehren.
</div>
{% endif %}

{% if devices %}
<div class="row g-3">
    {% for device in devices %}
    <div class="col-md-6 col-lg-4 col-xl-3">
        <div class="card busylight-card h-100">
            <div class="card-header bg-white border-0 pb-0">
                <div class="d-flex justify-content-between align-items-center">
                    <strong>{{ device.name }}</strong>
                    <small class="text-muted">{{ device.hostname }}</small>
                </div>
            </div>
            <div class="card-body pt-2">
                {% for seg in device.segments %}
                <div class="mb-2">
                    <small class="text-muted d-block mb-1">Segment {{ seg.index }}</small>
                    {% if seg.user %}
                    <div class="segment-bar" style="background: rgba({{ seg.r }}, {{ seg.g }}, {{ seg.b }}, 0.3); border-color: rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});">
                        <span class="status-dot me-2" style="background: rgb({{ seg.r }}, {{ seg.g }}, {{ seg.b }});"></span>
                        {{ seg.user }}
                    </div>
                    <small class="text-muted">{{ seg.aida }} / {{ seg.teams }}</small>
                    {% else %}
                    <div class="segment-bar empty">
                        <i class="bi bi-dash-circle me-2"></i> Nicht zugeordnet
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-5">
    <i class="bi bi-lightbulb display-1 text-muted"></i>
    <p class="text-muted mt-3">Noch keine WLED-Geraete konfiguriert.</p>
    <a href="/devices" class="btn btn-primary">Geraete hinzufuegen</a>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    // Auto-refresh every 10 seconds
    setTimeout(() => location.reload(), 10000);
    document.getElementById('last-update').textContent =
        'Aktualisiert: ' + new Date().toLocaleTimeString('de-DE');
</script>
{% endblock %}