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

{% block title %}Wasservergleich{% endblock %}

{% block breadcrumb %}<li>Wasser</li><li>Wasservergleich</li>{% endblock %}

{% block page_head %}
    <div>
        <h1>Wasservergleich</h1>
        <p class="sm-lead">Manuelle Proben aus Lilian Labs gegen die automatischen Messwerte der Anlage (InfluxDB).</p>
    </div>
    <div class="sm-page-actions">
        <a href="{{ path('admin_lilian_labs_index') }}" class="btn btn-secondary">Lilian Labs</a>
        <a href="{{ path('admin_water_comparison_details', {location: selected_location, days: days_back}) }}" class="btn btn-primary" id="detailsLink"
           data-base="{{ path('admin_water_comparison_details') }}"><i class="fas fa-table me-1"></i>Detailtabelle</a>
    </div>
{% endblock %}

{% block content %}
    <div data-sm-water-comparison data-url-api="{{ path('admin_water_comparison_api') }}">
        <form id="filterForm" method="get" 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>
            <label for="days" class="visually-hidden">Zeitbereich</label>
            <select class="form-select sm-select-auto" id="days" name="days" data-sm-autosubmit>
                {% for d, label in {1: 'Letzter Tag', 3: 'Letzte 3 Tage', 7: 'Letzte 7 Tage', 14: 'Letzte 14 Tage', 30: 'Letzte 30 Tage', 90: 'Letzte 90 Tage', 365: 'Letztes Jahr'} %}
                    <option value="{{ d }}" {{ days_back == d ? 'selected' }}>{{ label }}</option>
                {% endfor %}
            </select>
            <button type="submit" class="btn btn-secondary"><i class="fas fa-sync me-1"></i>Neu laden</button>
            <span class="sm-wc-legend ms-auto" aria-hidden="true">
                <span class="sm-wc-key sm-wc-key--manual">Lilian Labs (manuell)</span>
                <span class="sm-wc-key sm-wc-key--auto">InfluxDB (automatisch)</span>
            </span>
        </form>

        <div id="comparisonError" class="alert alert-danger" role="alert" hidden></div>

        <section class="sm-panel mb-3" id="statisticsPanel" hidden>
            <div class="sm-panel-body">
                <dl class="sm-summary" id="statisticsContainer"></dl>
            </div>
        </section>

        <div class="sm-stack">
            {% for chart in [
                {id: 'phChart', title: 'pH-Wert', unit: 'pH'},
                {id: 'chlorineChart', title: 'Freies Chlor', unit: 'mg/l'},
                {id: 'chlorineTotalChart', title: 'Gesamtchlor', unit: 'mg/l'}
            ] %}
                <section class="sm-panel">
                    <div class="sm-panel-head"><h2>{{ chart.title }}</h2><span class="sm-panel-meta">{{ chart.unit }}</span></div>
                    <div class="sm-panel-body sm-wc-chart" data-sm-loading>
                        <canvas id="{{ chart.id }}" aria-label="Verlauf {{ chart.title }}" role="img"></canvas>
                        <div class="sm-wc-loading sm-wc-empty" data-empty hidden>Keine Proben im gewählten Zeitraum.</div>
                        <div class="sm-wc-loading" data-loading><div class="spinner-border" role="status"><span class="visually-hidden">Lädt …</span></div></div>
                    </div>
                </section>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/vendor/chart.umd.min.js') }}" defer></script>
    <script src="{{ asset('js/pages/water-comparison.js') }}?v={{ sm_v }}" defer></script>
{% endblock %}