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

{% block title %}Wasservergleich · Details{% endblock %}

{% block breadcrumb %}
    <li>Wasser</li>
    <li><a href="{{ path('admin_water_comparison_index', {location: location, days: days_back}) }}">Wasservergleich</a></li>
    <li>Details</li>
{% endblock %}

{% macro val(v) %}{{ v is null or v is same as('') ? '–' : v|number_format(2, ',', '.') }}{% endmacro %}

{% macro delta(dev) %}
    {%- if dev is null -%}
        <span class="sm-muted">–</span>
    {%- else -%}
        <span class="sm-delta {{ dev.within_tolerance ? 'is-ok' : 'is-warn' }}">{{ dev.difference > 0 ? '+' }}{{ dev.difference|number_format(2, ',', '.') }}</span>
    {%- endif -%}
{% endmacro %}

{% block page_head %}
    <div>
        <h1>Vergleich im Detail</h1>
        <p class="sm-lead">{{ location ?: 'Alle Standorte' }} · letzte {{ days_back }} Tage</p>
    </div>
    <dl class="sm-summary">
        <div><dt>Proben</dt><dd>{{ statistics.total_lilian_measurements }}</dd></div>
        <div><dt>Mit Anlagenwert</dt><dd>{{ statistics.measurements_with_influx }}</dd></div>
        <div><dt>Ohne</dt><dd>{{ statistics.measurements_without_influx }}</dd></div>
        <div><dt>Ø Zeitabstand</dt><dd>{{ statistics.average_time_diff }} s</dd></div>
    </dl>
{% endblock %}

{% block content %}
    {% import _self as m %}
    <div class="sm-toolbar">
        <a href="{{ path('admin_water_comparison_index', {location: location, days: days_back}) }}" class="btn btn-secondary">Zu den Diagrammen</a>
        <span class="sm-panel-meta ms-auto">Δ grün: innerhalb der Toleranz · Δ gelb: außerhalb</span>
    </div>

    <section class="sm-panel">
        {% if comparison is not empty %}
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Zeitpunkt</th>
                            <th>Standort</th>
                            <th>Anlagenwert</th>
                            <th class="text-end">pH manuell</th>
                            <th class="text-end">pH Anlage</th>
                            <th class="text-end">Δ pH</th>
                            <th class="text-end">Cl frei manuell</th>
                            <th class="text-end">Cl frei Anlage</th>
                            <th class="text-end">Δ Cl</th>
                            <th class="text-end">Zeitabstand</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in comparison %}
                            <tr>
                                <td class="sm-mono">{{ item.timestamp|date('d.m.Y H:i') }}</td>
                                <td>{{ item.location }}</td>
                                <td>{% if item.has_both %}<span class="sm-tag sm-tag--ok">gefunden</span>{% else %}<span class="sm-tag sm-tag--warn">fehlt</span>{% endif %}</td>
                                <td class="text-end sm-num">{{ m.val(item.lilian.ph ?? null) }}</td>
                                <td class="text-end sm-num">{{ m.val(item.influx.ph ?? null) }}</td>
                                <td class="text-end">{{ m.delta(item.deviations.ph ?? null) }}</td>
                                <td class="text-end sm-num">{{ m.val(item.lilian.chlorine_free ?? null) }}</td>
                                <td class="text-end sm-num">{{ m.val(item.influx.chlorine_free ?? null) }}</td>
                                <td class="text-end">{{ m.delta(item.deviations.chlorine_free ?? null) }}</td>
                                <td class="text-end sm-num">{{ item.time_diff_seconds ? item.time_diff_seconds ~ ' s' : '–' }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="sm-empty"><strong>Keine Proben im Zeitraum</strong>Zeitraum oder Standort in der Übersicht ändern.</div>
        {% endif %}
    </section>
{% endblock %}