{% extends 'swimmonitor/base.html.twig' %}

{% block title %}Lilian Labs{% endblock %}

{% block breadcrumb %}<li>Wasser</li><li>Lilian Labs</li>{% endblock %}

{% block page_head %}
    <div>
        <h1>Lilian Labs</h1>
        <p class="sm-lead">Manuelle Wassermessungen aus der Lilian-Labs-App, synchronisiert in den SwimMonitor.</p>
    </div>
    <div class="sm-page-actions">
        <a href="{{ path('admin_lilian_labs_measurements') }}" class="btn btn-secondary"><i class="fas fa-table me-1"></i>Messungen</a>
        <a href="{{ path('admin_lilian_labs_config') }}" class="btn btn-secondary"><i class="fas fa-cog me-1"></i>Konfiguration</a>
    </div>
{% endblock %}

{% block content %}
    {% set token_state = not config ? 'none' : (config.tokenExpired ? 'alarm' : (config.tokenExpiringSoon ? 'warn' : 'ok')) %}
    {% set token_label = {none: 'Nicht eingerichtet', alarm: 'Abgelaufen', warn: 'Läuft bald ab', ok: 'Gültig'}[token_state] %}

    {% if not config %}
        <div class="alert alert-info">Noch keine Konfiguration vorhanden. <a href="{{ path('admin_lilian_labs_config') }}">Jetzt einrichten</a></div>
    {% elseif token_state == 'alarm' %}
        <div class="alert alert-danger"><strong>Token abgelaufen.</strong> Ohne gültiges Token ist keine Synchronisation möglich. <a href="{{ path('admin_lilian_labs_config') }}">Token erneuern</a></div>
    {% elseif token_state == 'warn' %}
        <div class="alert alert-warning"><strong>Token läuft bald ab.</strong> Noch {{ stats.days_until_expiry }} Tage gültig. <a href="{{ path('admin_lilian_labs_config') }}">Token erneuern</a></div>
    {% endif %}

    <div class="sm-grid-2" data-sm-lilian
         data-url-sync="{{ path('admin_lilian_labs_sync') }}"
         data-url-check="{{ path('admin_lilian_labs_check_token') }}">
        <section class="sm-panel">
            <div class="sm-panel-head"><h2>Status</h2><span class="sm-status is-{{ token_state }}">{{ token_label }}</span></div>
            <dl class="sm-kv">
                <dt>Messungen gesamt</dt><dd>{{ stats.total_measurements|number_format(0, ',', '.') }}</dd>
                <dt>Standorte</dt><dd>{{ stats.locations|length }}</dd>
                <dt>Letzte Synchronisation</dt><dd>{{ config and config.lastSync ? config.lastSync|date('d.m.Y H:i') : 'nie' }}</dd>
                <dt>Token</dt><dd><span class="is-{{ token_state }}">{{ token_label }}</span>{% if config and stats.days_until_expiry is defined and stats.days_until_expiry > 0 %} · noch {{ stats.days_until_expiry }} Tage{% endif %}</dd>
                {% if config %}<dt>Zeitbereich</dt><dd>letzte {{ config.syncDaysBack }} Tage</dd>{% endif %}
            </dl>
        </section>

        <section class="sm-panel">
            <div class="sm-panel-head"><h2>Aktionen</h2></div>
            <div class="sm-panel-body sm-stack">
                <div class="sm-action-row">
                    <div>
                        <strong>Daten synchronisieren</strong>
                        <div class="form-text m-0">Holt die Messungen {% if config %}der letzten {{ config.syncDaysBack }} Tage{% else %}gemäß Konfiguration{% endif %} von Lilian Labs.</div>
                    </div>
                    <button type="button" class="btn btn-primary" data-ll-action="sync" data-ll-busy="Synchronisiere …" {{ config ? '' : 'disabled' }}><i class="fas fa-sync me-1"></i>Synchronisieren</button>
                </div>
                <div class="sm-action-row">
                    <div>
                        <strong>Token prüfen</strong>
                        <div class="form-text m-0">Fragt bei Lilian Labs nach, ob das hinterlegte Token noch gilt.</div>
                    </div>
                    <button type="button" class="btn btn-secondary" data-ll-action="check" data-ll-busy="Prüfe …" {{ config ? '' : 'disabled' }}><i class="fas fa-check-circle me-1"></i>Prüfen</button>
                </div>
                <div id="syncStatus" class="alert mb-0" role="status" hidden></div>
            </div>
        </section>
    </div>

    {% if stats.locations is not empty %}
        <section class="sm-panel mt-3">
            <div class="sm-panel-head"><h2>Standorte</h2><span class="sm-panel-meta">aus den Messungen</span></div>
            <div class="sm-panel-body sm-chip-row">
                {% for location in stats.locations %}
                    <a class="sm-chip" href="{{ path('admin_lilian_labs_measurements', {location: location}) }}">{{ location }}</a>
                {% endfor %}
            </div>
        </section>
    {% endif %}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/pages/lilian-labs.js') }}?v={{ sm_v }}" defer></script>
{% endblock %}