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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Protokoll</h4>
    <span class="text-muted" id="last-update"></span>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover log-table mb-0">
                <thead>
                    <tr>
                        <th>Zeitpunkt</th>
                        <th>Benutzer</th>
                        <th>Zeiterfassung</th>
                        <th>Teams-Status</th>
                        <th>WLED-URL</th>
                        <th>Ergebnis</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in logs %}
                    <tr>
                        <td class="text-nowrap">{{ log.timestamp }}</td>
                        <td>{{ log.user_name }}</td>
                        <td>
                            <span class="badge {% if log.attendance_status == 'anwesend' %}bg-success{% elif log.attendance_status == 'abwesend' %}bg-secondary{% elif log.attendance_status == 'homeoffice' %}bg-warning text-dark{% else %}bg-light text-dark{% endif %}">
                                {{ log.attendance_status or '-' }}
                            </span>
                        </td>
                        <td>
                            <span class="badge bg-info">{{ log.teams_status or '-' }}</span>
                        </td>
                        <td><small class="font-monospace">{{ log.wled_url }}</small></td>
                        <td>
                            {% if log.result and '200' in log.result %}
                                <span class="text-success"><i class="bi bi-check-circle"></i> {{ log.result }}</span>
                            {% else %}
                                <span class="text-danger"><i class="bi bi-x-circle"></i> {{ log.result }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}

                    {% if not logs %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">
                            Noch keine Protokoll-Eintraege vorhanden.
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

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