{% extends 'swimmonitor/base.html.twig' %}
{% import 'swimmonitor/_macros.html.twig' as sm %}

{% block title %}Container-Übersicht{% endblock %}

{% block breadcrumb %}<li>Übersicht</li>{% endblock %}

{% set metrics = [
    {key: 't1', label: 'Temperatur', unit: '°C', digits: 1},
    {key: 'chlor', label: 'Freies Chlor', unit: 'mg/l', digits: 2},
    {key: 'redox', label: 'Redox', unit: 'mV', digits: 0},
    {key: 'ph', label: 'pH-Wert', unit: '', digits: 1},
] %}

{% set online_count = onlineById|filter(v => v)|length %}
{% set deviations = [] %}
{% for container in containers %}
    {% set d = data[container.id]|default({}) %}
    {% for m in metrics %}
        {% set st = sm.state(d[m.key ~ '_status'] ?? null) ~ '' %}
        {% if st in ['warn', 'alarm'] %}
            {% set deviations = deviations|merge([{container: container, metric: m, state: st, value: d[m.key] ?? null}]) %}
        {% endif %}
    {% endfor %}
{% endfor %}
{% set warn_ids = deviations|map(x => x.container.id)|reduce((carry, id) => id in carry ? carry : carry|merge([id]), []) %}

{% block page_head %}
    <div>
        <h1>Container-Übersicht</h1>
        <p class="sm-lead">Live-Werte aller Schwimmcontainer aus der Poolsteuerung.</p>
    </div>
    <dl class="sm-summary">
        <div><dt>Container</dt><dd>{{ containers|length }}</dd></div>
        <div><dt>Online</dt><dd class="is-ok">{{ online_count }}</dd></div>
        <div><dt>Offline</dt><dd class="{{ containers|length - online_count > 0 ? 'is-alarm' }}">{{ containers|length - online_count }}</dd></div>
        <div><dt>Abweichungen</dt><dd class="{{ deviations is not empty ? 'is-warn' }}">{{ deviations|length }}</dd></div>
        <div><dt>Stand</dt><dd>{{ 'now'|date('H:i') }}</dd></div>
    </dl>
{% endblock %}

{% block content %}
    <div class="sm-toolbar">
        <input class="sm-search" type="search" placeholder="Container suchen …" aria-label="Container suchen" data-sm-search="#container-list">
        <div class="sm-segment" data-sm-filter="#container-list">
            <button type="button" class="active" data-sm-filter-value="all">Alle<span class="sm-count">{{ containers|length }}</span></button>
            <button type="button" data-sm-filter-value="online">Online<span class="sm-count">{{ online_count }}</span></button>
            <button type="button" data-sm-filter-value="offline">Offline<span class="sm-count">{{ containers|length - online_count }}</span></button>
            <button type="button" data-sm-filter-value="warning">Mit Abweichung<span class="sm-count">{{ warn_ids|length }}</span></button>
        </div>
    </div>

    <section class="sm-panel">
        <div class="sm-crow-grid sm-crow-head">
            <div class="sm-label">Container</div>
            {% for m in metrics %}<div class="sm-label">{{ m.label }}</div>{% endfor %}
            <div></div>
        </div>
        <div id="container-list">
            {% for container in containers %}
                {% set d = data[container.id]|default({}) %}
                {% set is_online = onlineById[container.id]|default(false) %}
                <div class="sm-crow-grid sm-crow" data-sm-item data-sm-text="{{ container.name|lower }} {{ d.geo_ort|default('')|lower }}"
                     data-sm-tags="{{ is_online ? 'online' : 'offline' }}{{ container.id in warn_ids ? ' warning' }}">
                    <div>
                        <div class="sm-crow-name">
                            <span class="sm-dot {{ is_online ? 'is-on' : 'is-off' }}"></span>
                            <a href="{{ path('container_show', {id: container.id}) }}">{{ container.name }}</a>
                        </div>
                        <div class="sm-crow-loc">{{ d.geo_ort|default('Unbekannt') }} / {{ d.geo_region|default('Unbekannt') }} / {{ d.geo_land|default('Unbekannt') }}</div>
                        <div class="sm-crow-conn{{ is_online ? '' : ' is-off' }}">{{ d.error is defined ? 'API nicht erreichbar' : (is_online ? 'online' : 'offline') }}</div>
                        {{ sm.lte(lteById[container.id]|default(null)) }}
                    </div>
                    {% for m in metrics %}
                        {{ sm.metric(d, m.key, m.label, m.unit, m.digits) }}
                    {% endfor %}
                    <div class="sm-crow-action"><a class="sm-link-action" href="{{ path('container_show', {id: container.id}) }}">Details</a></div>
                </div>
            {% else %}
                <div class="sm-empty"><strong>Keine Container</strong>In der Übersicht sind noch keine Container angelegt.</div>
            {% endfor %}
            <div class="sm-empty" data-sm-empty hidden><strong>Keine Treffer</strong>Suchbegriff oder Filter ändern.</div>
        </div>
    </section>

    <div class="sm-grid-aside mt-3">
        <section class="sm-panel">
            <div class="sm-panel-head"><h2>Standorte</h2><span class="sm-panel-meta">OpenStreetMap · Mini-Container, blauer Punkt online, roter offline</span></div>
            <div class="sm-map sm-map--tall" data-sm-map
                 data-sm-map-markers="{{ locations|default([])|map(l => {lat: l.lat, lng: l.lng, label: l.info, online: l.status, url: l.detailUrl, model: asset(l.model), kind: l.kind})|json_encode }}"></div>
        </section>
        <section class="sm-panel">
            <div class="sm-panel-head"><h2>Abweichungen</h2><span class="sm-panel-meta">aktueller Stand</span></div>
            {% if deviations is not empty %}
                <ul class="sm-log">
                    {% for x in deviations %}
                        <li class="sm-log--{{ x.state }}">
                            <span class="sm-log-time">{{ x.state == 'alarm' ? 'Alarm' : 'Warn.' }}</span>
                            <div>
                                <div class="sm-log-text"><b>{{ x.container.name }}</b> {{ x.metric.label }} außerhalb der Schwelle</div>
                                <div class="sm-log-detail">{{ sm.num(x.value, x.metric.digits) }} {{ x.metric.unit }}</div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <div class="sm-empty"><strong>Alles im Soll</strong>Keine Warnungen oder Alarme.</div>
            {% endif %}
        </section>
    </div>

    {{ sm.metric_modal() }}
{% endblock %}

{% block vendor_stylesheets %}<link rel="stylesheet" href="{{ asset('css/vendor/leaflet.css') }}">{% endblock %}
{% block vendor_javascripts %}<script src="{{ asset('js/vendor/leaflet.js') }}" defer></script>{% endblock %}
{% block javascripts %}
    <script src="{{ asset('js/pages/metric-detail.js') }}?v={{ sm_v }}" defer></script>
    <script type="module" src="{{ asset('js/pages/api-map-models.js') }}?v={{ sm_v }}"></script>
{% endblock %}