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

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

{% block breadcrumb %}
    <li>Wasser</li>
    <li><a href="{{ path('admin_lilian_labs_index') }}">Lilian Labs</a></li>
    <li>Messungen</li>
{% endblock %}

{% macro value(v, state) %}
    {%- if v is null -%}
        <span class="sm-muted">–</span>
    {%- else -%}
        <span class="sm-num{{ state ? ' is-' ~ state }}">{{ v|number_format(2, ',', '.') }}</span>
    {%- endif -%}
{% endmacro %}

{% block page_head %}
    <div>
        <h1>Messungen{% if selected_location %} · {{ selected_location }}{% endif %}</h1>
        <p class="sm-lead">Manuelle Wasserproben aus Lilian Labs, neueste zuerst.</p>
    </div>
    <div class="sm-page-actions">
        <a href="{{ path('admin_lilian_labs_index') }}" class="btn btn-secondary">Zur Übersicht</a>
    </div>
{% endblock %}

{% block content %}
    {% import _self as m %}
    <form method="get" action="{{ path('admin_lilian_labs_measurements') }}" class="sm-toolbar">
        <label for="location" class="visually-hidden">Standort</label>
        <select class="form-select sm-select-auto" id="location" name="location" data-sm-autosubmit>
            <option value="">Alle Standorte</option>
            {% for location in locations %}
                <option value="{{ location }}" {{ selected_location == location ? 'selected' }}>{{ location }}</option>
            {% endfor %}
        </select>
        {% if selected_location %}<a href="{{ path('admin_lilian_labs_measurements') }}" class="btn btn-secondary">Filter zurücksetzen</a>{% endif %}
        <noscript><button type="submit" class="btn btn-secondary">Filtern</button></noscript>
        <span class="sm-panel-meta ms-auto">Sollwerte: pH 7,0–7,6 · freies Chlor 0,3–0,6 mg/l · gebundenes Chlor ≤ 0,2 mg/l</span>
    </form>

    <section class="sm-panel">
        {% if measurements 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>Messpunkt</th>
                            <th>Gemessen von</th>
                            <th class="text-end">pH</th>
                            <th class="text-end">Chlor frei</th>
                            <th class="text-end">Chlor gesamt</th>
                            <th class="text-end">Chlor gebunden</th>
                            <th class="text-end">KS 4,3</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for measurement in measurements %}
                            <tr>
                                <td class="sm-mono">{{ measurement.measuredAt|date('d.m.Y H:i') }}</td>
                                <td>{{ measurement.location }}</td>
                                <td>{{ measurement.pointName }}</td>
                                <td>{{ measurement.measuredBy }}</td>
                                <td class="text-end">{{ m.value(measurement.ph, measurement.ph is null ? '' : (measurement.ph >= 7.0 and measurement.ph <= 7.6 ? '' : 'warn')) }}</td>
                                <td class="text-end">{{ m.value(measurement.chlorineFree, measurement.chlorineFree is null ? '' : (measurement.chlorineFree >= 0.3 and measurement.chlorineFree <= 0.6 ? '' : 'warn')) }}</td>
                                <td class="text-end">{{ m.value(measurement.chlorineTotal, '') }}</td>
                                <td class="text-end">{{ m.value(measurement.chlorineCombined, measurement.chlorineCombined is null or measurement.chlorineCombined <= 0.2 ? '' : 'warn') }}</td>
                                <td class="text-end">{{ m.value(measurement.ks43, '') }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if total_pages > 1 %}
                <nav class="sm-panel-foot justify-content-center" aria-label="Seiten">
                    <ul class="pagination mb-0">
                        {% if current_page > 1 %}
                            <li class="page-item"><a class="page-link" href="{{ path('admin_lilian_labs_measurements', {page: current_page - 1, location: selected_location}) }}" aria-label="Vorherige Seite"><i class="fas fa-chevron-left"></i></a></li>
                        {% endif %}
                        {% for page in 1..total_pages %}
                            {% if page == current_page %}
                                <li class="page-item active" aria-current="page"><span class="page-link">{{ page }}</span></li>
                            {% elseif page == 1 or page == total_pages or (page >= current_page - 2 and page <= current_page + 2) %}
                                <li class="page-item"><a class="page-link" href="{{ path('admin_lilian_labs_measurements', {page: page, location: selected_location}) }}">{{ page }}</a></li>
                            {% elseif page == 2 or page == total_pages - 1 %}
                                <li class="page-item disabled"><span class="page-link">…</span></li>
                            {% endif %}
                        {% endfor %}
                        {% if current_page < total_pages %}
                            <li class="page-item"><a class="page-link" href="{{ path('admin_lilian_labs_measurements', {page: current_page + 1, location: selected_location}) }}" aria-label="Nächste Seite"><i class="fas fa-chevron-right"></i></a></li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        {% else %}
            <div class="sm-empty">
                <strong>Keine Messungen vorhanden</strong>
                <a href="{{ path('admin_lilian_labs_index') }}">Zur Übersicht und synchronisieren</a>
            </div>
        {% endif %}
    </section>
{% endblock %}