{# Wiederverwendbare Bausteine für SwimMonitor-Seiten (siehe docs/SWIMMONITOR-STYLE.md) #}

{# Status aus ioBroker (success/warning/danger/secondary) auf SwimMonitor-Zustände abbilden #}
{% macro state(status) -%}
    {{- {success: 'ok', warning: 'warn', danger: 'alarm'}[status|default('')|trim]|default('none') -}}
{%- endmacro %}

{% macro state_label(state) -%}
    {{- {ok: 'im Soll', warn: 'Warnung', alarm: 'Alarm'}[state]|default('keine Daten') -}}
{%- endmacro %}

{% macro is_number(value) -%}
    {{- value is not null and value is not iterable and (value ~ '') matches '/^\\s*-?[0-9]+([.,][0-9]+)?\\s*$/' ? '1' : '' -}}
{%- endmacro %}

{% macro num(value, digits) -%}
    {%- if _self.is_number(value) is not empty -%}
        {{- (value|replace({',': '.'})|trim + 0)|number_format(digits, ',', '.') -}}
    {%- else -%}—{%- endif -%}
{%- endmacro %}

{#
    Messwert mit Skala aus den API-Daten eines Containers.
    key: t1, chlor, redox oder ph
#}
{% macro metric(d, key, label, unit, digits, show_label) %}
    {% set state = _self.state(d[key ~ '_status'] ?? null) ~ '' %}
    {% set value = d[key] ?? null %}
    {% set lower = d[key ~ '_untere_grenze'] ?? null %}
    {% set upper = d[key ~ '_obere_grenze'] ?? null %}
    {% set has_value = _self.is_number(value) is not empty %}
    {% set has_range = _self.is_number(lower) is not empty and _self.is_number(upper) is not empty %}
    {% if has_range %}
        {% set lo = lower|replace({',': '.'}) + 0 %}
        {% set hi = upper|replace({',': '.'}) + 0 %}
        {% set pad = (hi - lo) > 0 ? (hi - lo) * 0.6 : 1 %}
        {% set smin = lo - pad %}
        {% set smax = hi + pad %}
        {% if has_value %}
            {% set v = value|replace({',': '.'}) + 0 %}
            {% set smin = min(smin, v) %}
            {% set smax = max(smax, v) %}
        {% endif %}
    {% endif %}
    <button type="button" class="sm-metric sm-metric--button" data-bs-toggle="modal" data-bs-target="#sm-metric-modal"
            data-sm-detail="{{ {
                title: label,
                value: has_value ? _self.num(value, digits) ~ (unit ? ' ' ~ unit : '') : 'keine Daten',
                state: _self.state_label(state),
                upper: upper ?? '—',
                lower: lower ?? '—',
                target: d[key ~ '_untere_sollwert'] ?? '—',
                warn_upper: d[key ~ '_warnschwelle_obere'] ?? '—',
                warn_lower: d[key ~ '_warnschwelle_untere'] ?? '—'
            }|json_encode }}">
        {% if show_label|default(false) %}<span class="sm-metric-label">{{ label }}</span>{% endif %}
        <span class="sm-metric-value{{ has_value ? '' : ' is-empty' }}">{{ _self.num(value, digits) }}{% if unit %}<span class="sm-unit">{{ unit }}</span>{% endif %}</span>
        <span class="sm-scale" data-sm-scale
            {% if has_range %} data-min="{{ smin }}" data-max="{{ smax }}" data-target-min="{{ lo }}" data-target-max="{{ hi }}"{% else %} data-min="0" data-max="1"{% endif %}
            {% if has_value and has_range %} data-value="{{ v }}" data-state="{{ state }}"{% endif %}></span>
        <span class="sm-metric-foot">
            <span class="sm-target">{% if has_range %}Soll {{ _self.num(lower, digits) }}–{{ _self.num(upper, digits) }}{% else %}Soll —{% endif %}</span>
            <span class="sm-state is-{{ state }}">{{ _self.state_label(state) }}</span>
        </span>
    </button>
{% endmacro %}

{# Vier LTE-Balken. lte ist null oder {bars: 0–4, text: string, error?: string}. #}
{% macro lte(lte) %}
    {% set bars = lte is iterable and lte.bars is defined ? lte.bars : null %}
    {% set caption = lte.error|default('') %}
    {% if caption is empty %}
        {% set caption = bars is same as(null) ? 'LTE' : lte.text|default('LTE') %}
    {% endif %}
    {% set tone = lte.error|default('') ? 'is-error' : (bars is same as(null) ? 'is-unknown' : (bars <= 1 ? 'is-weak' : (bars == 2 ? 'is-mid' : 'is-strong'))) %}
    <span class="sm-lte {{ tone }}" title="{{ bars is same as(null) ? 'Kein LTE-Messwert' : caption }}" aria-label="{{ bars is same as(null) ? 'LTE-Empfang unbekannt' : 'LTE-Empfang ' ~ bars ~ ' von 4, ' ~ caption }}">
        <span class="sm-lte-bars" aria-hidden="true">{% for step in 1..4 %}<i class="{{ bars is not same as(null) and step <= bars ? 'is-on' }}"></i>{% endfor %}</span>
        <span>{{ caption }}</span>
    </span>
{% endmacro %}

{# Dialog für die Messwert-Details; Befüllung über js/pages/metric-detail.js #}
{% macro metric_modal() %}
    <div class="modal fade" id="sm-metric-modal" tabindex="-1" aria-hidden="true" aria-labelledby="sm-metric-modal-title">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="sm-metric-modal-title" data-sm-detail-field="title">Messwert</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
                </div>
                <div class="modal-body p-0">
                    <dl class="sm-kv">
                        <dt>Aktueller Wert</dt><dd data-sm-detail-field="value"></dd>
                        <dt>Zustand</dt><dd data-sm-detail-field="state"></dd>
                    </dl>
                    <div class="sm-label px-3 pt-3 pb-1">Poolsteuerung</div>
                    <dl class="sm-kv">
                        <dt>Obere Grenze</dt><dd data-sm-detail-field="upper"></dd>
                        <dt>Untere Grenze</dt><dd data-sm-detail-field="lower"></dd>
                        <dt>Sollwert</dt><dd data-sm-detail-field="target"></dd>
                    </dl>
                    <div class="sm-label px-3 pt-3 pb-1">SwimMonitor-Warnschwellen</div>
                    <dl class="sm-kv">
                        <dt>Obere Schwelle</dt><dd data-sm-detail-field="warn_upper"></dd>
                        <dt>Untere Schwelle</dt><dd data-sm-detail-field="warn_lower"></dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}