{% extends 'base.html.twig' %}
{% import 'components/datalogger_tabs.html.twig' as tabs %}

{% block title %}Gruppierte HAT Sensoren - Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Home</a>
        <i class="fas fa-chevron-right"></i>
        {% if datalogger is defined %}
            <a href="{{ path('app_datalogger_detail', {id: datalogger.id}) }}">{{ datalogger.name }}</a>
            <i class="fas fa-chevron-right"></i>
        {% endif %}
        <span>Gruppierte HAT Sensoren</span>
    </div>
    <div class="page-title">
        <i class="fas fa-layer-group"></i>
        <h2>Gruppierte HAT Sensoren{% if datalogger is defined %} - {{ datalogger.name }}{% endif %}</h2>
    </div>
</div>

{# API-Warnung wird als Toast angezeigt wenn nötig #}
{% if apiAvailable is defined and not apiAvailable %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    showToast('Datalogger API ist nicht erreichbar. Die angezeigten Daten können veraltet sein.', 'warning', 6000);
});
</script>
{% endif %}

{% if datalogger is defined %}
{{ tabs.renderTabs(datalogger, app.request.attributes.get('_route')) }}
{% endif %}

<div class="hats-groups-modern">

{# Chart-Modus Toggle #}
<div class="chart-mode-box">
    <div class="chart-mode-inner">
        <span class="chart-mode-label">Chart-Modus:</span>
        <div class="chart-mode-options">
            <label class="chart-mode-option">
                <input type="radio" name="chartMode" value="live" id="chartModeLive">
                <i class="fas fa-bolt icon-warning"></i>
                <span>Live (API)</span>
            </label>
            <label class="chart-mode-option">
                <input type="radio" name="chartMode" value="historical" id="chartModeHistorical" checked>
                <i class="fas fa-history icon-info"></i>
                <span>Historisch (InfluxDB)</span>
            </label>
        </div>
        <div id="liveChartStatus" class="live-chart-status">
            <i class="fas fa-history text-2xs"></i>
            <span>Historisch-Modus aktiv</span>
        </div>
    </div>
</div>

{# Chart-Einstellungen in einer Karte #}
<div id="chartSettings" class="status-card mb-15">
    <div class="card-header">
        <h3 class="flex align-center gap-half">
            <i class="fas fa-cog text-primary"></i>
            Chart-Einstellungen
        </h3>
    </div>
    <div class="card-body">
        {# Sektionenauswahl #}
        <div class="mb-15">
            <label class="settings-label">
                <i class="fas fa-layer-group"></i>
                Sektionen auswählen
            </label>
            <div id="groupSelectContainer" class="group-select-container">
                {% if allGroups is defined %}
                    <label class="group-select-item group-select-item-all">
                        <input type="checkbox" id="selectAllGroups">
                        <span class="font-medium text-sm flex-1">Alle Sektionen auswählen</span>
                    </label>
                    {% for group in allGroups %}
                        <label class="group-select-item" data-group-id="{{ group.id }}" data-type="{{ group.type }}">
                            <input type="checkbox" class="group-checkbox" value="{{ group.id }}" data-type="{{ group.type }}">
                            <span class="font-medium text-sm flex-1">{{ group.name }}</span>
                        </label>
                    {% endfor %}
                {% else %}
                    <div class="group-select-empty text-center padding-15 text-secondary">
                        <i class="fas fa-info-circle block mb-half text-xl"></i>
                        Keine Gruppen verfügbar
                    </div>
                {% endif %}
            </div>
            <small class="text-secondary text-sm block mt-half">
                <i class="fas fa-check-square mr-quarter"></i>
                Mehrfachauswahl möglich
            </small>
        </div>

        {# Einstellungen in Grid #}
        <div class="settings-grid">
            {# Zeitraum #}
            <div>
                <label class="settings-label">
                    <i class="fas fa-clock"></i>
                    Zeitraum
                </label>
                <div class="time-range-grid">
                    <button type="button" class="time-range-btn range-btn" data-range="1h">1h</button>
                    <button type="button" class="time-range-btn range-btn" data-range="6h">6h</button>
                    <button type="button" class="time-range-btn range-btn active" data-range="24h">24h</button>
                    <button type="button" class="time-range-btn range-btn" data-range="7d">7d</button>
                    <button type="button" class="time-range-btn range-btn" data-range="30d">30d</button>
                </div>
                <input type="hidden" id="timeRange" value="24h">
                <div class="custom-time-range mt-half">
                    <label class="form-label-block text-sm text-secondary">Benutzerdefinierter Zeitraum (Datum + Uhrzeit)</label>
                    <div class="flex gap-half align-center flex-wrap">
                        <input type="datetime-local" id="customRangeFrom" class="form-input-full custom-range-input" placeholder="Von" step="60">
                        <span class="text-secondary">bis</span>
                        <input type="datetime-local" id="customRangeTo" class="form-input-full custom-range-input" placeholder="Bis" step="60">
                    </div>
                    <small class="text-secondary text-sm block mt-quarter">Falls ausgefüllt: Chart „laden“, CSV- und PDF-Export verwenden genau diesen Zeitraum (sonst die Presets 1h/6h/24h/7d/30d).</small>
                </div>
            </div>

            {# Aggregation #}
            <div>
                <label class="settings-label">
                    <i class="fas fa-chart-bar"></i>
                    Aggregation
                </label>
                <div class="agg-grid">
                    <button type="button" class="aggregation-btn agg-btn active" data-aggregation="mean">Ø</button>
                    <button type="button" class="aggregation-btn agg-btn" data-aggregation="max">Max</button>
                    <button type="button" class="aggregation-btn agg-btn" data-aggregation="min">Min</button>
                    <button type="button" class="aggregation-btn agg-btn" data-aggregation="last">Letzter</button>
                </div>
                <input type="hidden" id="aggregation" value="mean">
            </div>

            {# Prognose #}
            <div>
                <label class="settings-label">
                    <i class="fas fa-crystal-ball"></i>
                    Prognose
                </label>
                <div class="flex flex-col gap-half">
                    <label class="forecast-label flex align-center gap-half cursor-pointer padding-75 border-2 border-radius card-bg transition user-select-none">
                        <input type="checkbox" id="showForecast">
                        <span class="text-sm font-medium flex-1">Prognose anzeigen</span>
                    </label>
                    <div id="forecastPeriodContainer" class="forecast-period-disabled grid grid-cols-3 gap-half">
                        <button type="button" class="forecast-period-btn range-btn" data-period="1h">1h</button>
                        <button type="button" class="forecast-period-btn range-btn active" data-period="6h">6h</button>
                        <button type="button" class="forecast-period-btn range-btn" data-period="24h">24h</button>
                    </div>
                    <input type="hidden" id="forecastPeriod" value="6h">
                </div>
            </div>
        </div>

        {# Aktions-Buttons #}
        <div class="actions-bar">
            <button id="loadChartBtn" class="btn btn-primary flex-1 min-w-150 flex align-center justify-center gap-half padding-75 font-semibold">
                <i class="fas fa-chart-line"></i>
                <span>Chart laden</span>
            </button>
            <button id="exportCsvBtn" class="btn btn-secondary padding-75 flex align-center gap-half whitespace-nowrap" disabled>
                <i class="fas fa-download"></i>
                <span>CSV</span>
            </button>
            <button id="exportPdfBtn" class="btn btn-secondary padding-75 flex align-center gap-half whitespace-nowrap" disabled>
                <i class="fas fa-file-pdf"></i>
                <span>PDF</span>
            </button>
        </div>
    </div>
</div>

<div class="auto-refresh-bar">
    <div class="flex align-center gap-half">
        <i class="fas fa-sync-alt text-primary"></i>
        <span class="font-medium text-body">Auto-Refresh:</span>
    </div>
    <div class="flex align-center gap-1">
        <select id="refreshInterval" class="form-select w-full form-input min-w-120">
            <option value="0">OFF</option>
            <option value="1000">1s</option>
            <option value="5000">5s</option>
            <option value="10000">10s</option>
            <option value="30000">30s</option>
            <option value="60000">1min</option>
            <option value="300000">5min</option>
        </select>
        {% if datalogger is defined %}
        <button id="refreshValuesBtn" class="btn btn-secondary padding-75">
            <i class="fas fa-sync"></i> Aktualisieren
        </button>
        {% endif %}
    </div>
</div>

{# Chart-Container #}
<div id="chartContainer" class="chart-container-box">
    <div class="chart-header mb-1">
        <div class="chart-header-row">
            <h3 class="chart-header h3 m-0 flex align-center gap-half">
                <i class="fas fa-chart-line"></i>
                <span id="chartTitle">Gruppierte Sensoren</span>
            </h3>
        </div>
    </div>
    <canvas id="groupChart" class="max-h-500"></canvas>
</div>

{# Filter #}
<div class="filter-bar-card">
    <div class="filter-grid">
        <div>
            <label class="form-label">
                <i class="fas fa-filter"></i> Filter
            </label>
            <select id="group-filter" class="form-select w-full form-input">
                <option value="all">Alle Sektionen</option>
                <option value="alarm">Mit Alarmen</option>
                <option value="ok">Ohne Alarmen</option>
                <option value="temperature">Mit Temperatur</option>
                <option value="pressure">Mit Druck</option>
            </select>
        </div>
        <div>
            <label class="form-label">
                <i class="fas fa-sort"></i> Sortierung
            </label>
            <select id="group-sort" class="form-select w-full form-input">
                <option value="name">Name (A-Z)</option>
                <option value="name-desc">Name (Z-A)</option>
                <option value="alarm">Alarm zuerst</option>
            </select>
        </div>
        <div>
            <button id="clear-filters" class="btn btn-secondary padding-75 whitespace-nowrap">
                <i class="fas fa-times"></i> Zurücksetzen
            </button>
        </div>
    </div>
    <div id="filter-results" class="mt-half text-sm text-secondary hidden">
        <i class="fas fa-info-circle"></i> <span id="filter-results-text"></span>
    </div>
</div>

<div class="content-grid">
    <div class="content-main">
        
        {# Gesamtwerte-Card direkt nach dem Suchfeld #}
        {% if sensorGroups.totals is defined %}
            {% set totals = sensorGroups.totals %}
            <div class="status-card mb-15">
                <div class="card-header">
                    <h3 class="text-base m-0">
                        <i class="fas fa-chart-pie text-primary text-sm"></i> Gesamtwerte
                    </h3>
                </div>
                <div class="card-body">
                    <div class="totals-grid">
                        {# Temperatur #}
                        {% if totals.temperature is not null %}
                            <div class="total-card total-card-temp">
                                <div class="total-card-header flex align-center gap-half">
                                    <i class="fas fa-thermometer-half icon-danger text-xl"></i>
                                    <strong class="total-card-label text-body">Durchschnittstemperatur</strong>
                                    <i class="fas fa-question-circle calculation-info-icon icon-danger" data-type="temperature" title="Berechnungsdetails anzeigen"></i>
                                </div>
                                <div class="total-card-value icon-danger">{{ totals.temperature|number_format(2) }}°C</div>
                            </div>
                        {% endif %}
                        {% if totals.pressure is not null %}
                            <div class="total-card total-card-pressure">
                                <div class="total-card-header flex align-center gap-half">
                                    <i class="fas fa-tachometer-alt icon-primary-blue text-xl"></i>
                                    <strong class="total-card-label text-body">Durchschnittsdruck</strong>
                                    <i class="fas fa-question-circle calculation-info-icon icon-primary-blue" data-type="pressure" title="Berechnungsdetails anzeigen"></i>
                                </div>
                                <div class="total-card-value icon-primary-blue">{{ totals.pressure|number_format(2) }} bar(g)</div>
                            </div>
                        {% endif %}
                        {% if totals.massKg is not null %}
                            <div class="total-card total-card-mass">
                                <div class="total-card-header flex align-center gap-half">
                                    <i class="fas fa-weight text-xl"></i>
                                    <strong class="total-card-label">Aktuelle Gesamtmasse</strong>
                                    <i class="fas fa-question-circle calculation-info-icon" data-type="mass" title="Berechnungsdetails anzeigen"></i>
                                </div>
                                <div class="total-card-value mb-quarter">
                                    {{ totals.massKg|number_format(2) }} kg
                                    {% if totals.maxMassAt0C is defined and totals.maxMassAt0C is not null %}
                                        <div class="text-sm mt-quarter opacity-90">{{ totals.maxMassAt0C|number_format(2) }} kg bei 0°C</div>
                                    {% endif %}
                                </div>
                                {% if totals.usableMassKg is not null %}
                                    <div class="flex align-center gap-half text-sm opacity-90 mt-quarter">
                                        <span>Nutzbar: {{ totals.usableMassKg|number_format(2) }} kg</span>
                                        <i class="fas fa-question-circle calculation-info-icon text-xs" data-type="usableMass" title="Berechnungsdetails anzeigen"></i>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        {% if totals.fillLevelPercent is not null %}
                            <div class="total-card total-card-fill">
                                <div class="total-card-header flex align-center gap-half">
                                    <i class="fas fa-percentage text-xl"></i>
                                    <strong class="total-card-label">Füllstand</strong>
                                    <i class="fas fa-question-circle calculation-info-icon" data-type="filllevel" title="Berechnungsdetails anzeigen"></i>
                                </div>
                                <div class="total-card-value">{{ totals.fillLevelPercent|number_format(1) }}%</div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}
        
        {% if sensorGroups is defined and sensorGroups.groups is defined %}
            {% if sensorGroups.groups is not empty %}
                <div id="groups-container" class="groups-container">
                {% for group in sensorGroups.groups %}
                    {% set sensorNames = [] %}
                    {% if group.temperatureSensors is defined %}
                        {% for sensor in group.temperatureSensors %}
                            {% set sensorNames = sensorNames|merge([(sensor.hatName ?? '')|lower, ('ch' ~ (sensor.channel ?? ''))|lower]) %}
                        {% endfor %}
                    {% endif %}
                    {% if group.pressureSensors is defined %}
                        {% for sensor in group.pressureSensors %}
                            {% set sensorNames = sensorNames|merge([(sensor.hatName ?? '')|lower, ('ch' ~ (sensor.channel ?? ''))|lower]) %}
                        {% endfor %}
                    {% endif %}
                    <div class="status-card group-card mb-0" 
                         data-group-id="{{ group.id ?? loop.index }}" 
                         data-group-name="{{ group.name|lower }}"
                         data-group-description="{{ (group.description ?? '')|lower }}"
                         data-sensor-names="{{ sensorNames|join(' ') }}"
                         data-has-alarm="{{ (group.alarms is defined and group.alarms is not empty) ? 'true' : 'false' }}"
                         data-has-temperature="{{ (group.temperatureSensors is defined and group.temperatureSensors is not empty) ? 'true' : 'false' }}"
                         data-has-pressure="{{ (group.pressureSensors is defined and group.pressureSensors is not empty) ? 'true' : 'false' }}">
                        <div class="card-header">
                            <div class="group-card-header">
                                <div class="flex-1">
                                    <h3 class="group-card-title"><i class="fas fa-layer-group text-primary"></i> {{ group.name }}</h3>
                                    {% if group.description %}
                                        <p class="group-card-desc">{{ group.description }}</p>
                                    {% endif %}
                                </div>
                                {# Alarm-Status #}
                                {% if group.alarmsEnabled and group.alarmThresholds %}
                                    {% set hasAlarm = false %}
                                    {% if group.temperatureAverage is not null %}
                                        {% if group.alarmThresholds.temperature.min is defined and group.temperatureAverage < group.alarmThresholds.temperature.min %}
                                            {% set hasAlarm = true %}
                                        {% elseif group.alarmThresholds.temperature.max is defined and group.temperatureAverage > group.alarmThresholds.temperature.max %}
                                            {% set hasAlarm = true %}
                                        {% endif %}
                                    {% endif %}
                                    {% if group.pressureAverage is not null %}
                                        {% if group.alarmThresholds.pressure.min is defined and group.pressureAverage < group.alarmThresholds.pressure.min %}
                                            {% set hasAlarm = true %}
                                        {% elseif group.alarmThresholds.pressure.max is defined and group.pressureAverage > group.alarmThresholds.pressure.max %}
                                            {% set hasAlarm = true %}
                                        {% endif %}
                                    {% endif %}
                                    <div class="{{ hasAlarm ? 'badge-alarm' : 'badge-ok' }}">
                                        <i class="fas fa-{{ hasAlarm ? 'exclamation-triangle' : 'check-circle' }}"></i>
                                        {{ hasAlarm ? 'Alarm' : 'OK' }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="card-body">
                            {# Alarm-Warnungen #}
                            {% if group.alarms is defined and group.alarms is not empty %}
                                <div class="alarm-box">
                                    <div class="alarm-box-header">
                                        <i class="fas fa-exclamation-triangle icon-danger"></i>
                                        <strong class="alarm-box-title">Alarm!</strong>
                                    </div>
                                    <ul class="alarm-box-list">
                                        {% for alarm in group.alarms %}
                                            <li>{{ alarm.message }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endif %}
                            
                            {# Keine API-Sensordaten (Gruppe konfiguriert, aber API liefert nichts) #}
                            {% if (group.temperatureSensors is not defined or group.temperatureSensors is empty) and (group.pressureSensors is not defined or group.pressureSensors is empty) %}
                                <div class="info-box-empty">
                                    <i class="fas fa-info-circle"></i>
                                    Keine Sensordaten von der API (API offline oder HAT-Namen/Channels passen nicht zur Konfiguration).
                                </div>
                            {% endif %}
                            
                            {# Temperatur-Sensoren #}
                            {% if group.temperatureSensors is defined and group.temperatureSensors is not empty %}
                                <div class="temp-section">
                                    <h4 class="section-title">
                                        <i class="fas fa-thermometer-half icon-temp"></i>
                                        Temperatursensoren
                                        {% if group.alarmThresholds and group.alarmThresholds.temperature %}
                                            <span class="section-title-meta">
                                                {% if group.alarmThresholds.temperature.min is defined %}Min: {{ group.alarmThresholds.temperature.min }}°C{% endif %}
                                                {% if group.alarmThresholds.temperature.min is defined and group.alarmThresholds.temperature.max is defined %} / {% endif %}
                                                {% if group.alarmThresholds.temperature.max is defined %}Max: {{ group.alarmThresholds.temperature.max }}°C{% endif %}
                                            </span>
                                        {% endif %}
                                    </h4>
                                    {% if group.showAverage and group.temperatureAverage is not null and group.temperatureSensors|length > 1 %}
                                        <div class="temperature-average average-row">
                                            <strong class="text-body text-sm">Durchschnitt:</strong>
                                            <span class="average-value average-value-temp">
                                                {{ group.temperatureAverage|number_format(2) }}°C
                                            </span>
                                        </div>
                                    {% endif %}
                                    {# Zeige immer die aktuellen Werte an, auch wenn showIndividual false ist #}
                                    <div class="temperature-sensors">
                                        <div class="flex flex-wrap gap-half">
                                            {% for sensor in group.temperatureSensors %}
                                                <div class="sensor-value sensor-value-box sensor-value-box-temp" data-channel="{{ sensor.channel ?? '' }}">
                                                    <span class="text-xs text-secondary">
                                                        {% if sensor.channel is not null %}Ch{{ sensor.channel }}{% endif %}
                                                    </span>
                                                    <span class="value-display">
                                                        {% if sensor.value is defined and sensor.value is not null %}
                                                            {{ sensor.value|number_format(2) }}{% if sensor.unit %}{{ sensor.unit }}{% else %}°C{% endif %}
                                                        {% else %}
                                                            <span>--</span>
                                                        {% endif %}
                                                    </span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            
                            {# Druck-Sensoren #}
                            {% if group.pressureSensors is defined and group.pressureSensors is not empty %}
                                <div class="pressure-section-box">
                                    <h4 class="section-title">
                                        <i class="fas fa-tachometer-alt icon-pressure"></i>
                                        Drucksensoren
                                        {% if group.alarmThresholds and group.alarmThresholds.pressure %}
                                            <span class="section-title-meta">
                                                {% if group.alarmThresholds.pressure.min is defined %}Min: {{ group.alarmThresholds.pressure.min }} bar{% endif %}
                                                {% if group.alarmThresholds.pressure.min is defined and group.alarmThresholds.pressure.max is defined %} / {% endif %}
                                                {% if group.alarmThresholds.pressure.max is defined %}Max: {{ group.alarmThresholds.pressure.max }} bar{% endif %}
                                            </span>
                                        {% endif %}
                                    </h4>
                                    {% if group.showAverage and group.pressureAverage is not null and group.pressureSensors|length > 1 %}
                                        <div class="pressure-average average-row">
                                            <strong class="text-body text-sm">Durchschnitt:</strong>
                                            <span class="average-value average-value-pressure">
                                                {{ group.pressureAverage|number_format(2) }} bar
                                            </span>
                                        </div>
                                    {% endif %}
                                    
                                    {# Zeige immer die aktuellen Werte an, auch wenn showIndividual false ist #}
                                    <div class="pressure-sensors">
                                        <div class="flex flex-wrap gap-half">
                                            {% for sensor in group.pressureSensors %}
                                                <div class="sensor-value sensor-value-box sensor-value-box-pressure" data-channel="{{ sensor.channel ?? '' }}">
                                                    <span class="text-xs text-secondary">
                                                        {% if sensor.channel is not null %}Ch{{ sensor.channel }}{% endif %}
                                                    </span>
                                                    <span class="value-display">
                                                        {% if sensor.value is defined and sensor.value is not null %}
                                                            {% set displayUnit = sensor.unit ? (sensor.unit|lower == 'bar' ? 'bar (g)' : sensor.unit) : ' bar' %}
                                                            {{ sensor.value|number_format(2) }}{{ displayUnit }}
                                                        {% else %}
                                                            <span>--</span>
                                                        {% endif %}
                                                    </span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            
                            {# H₂-Masse Sektion #}
                            {% if group.massKg is defined and group.massKg is not null %}
                                <div class="mass-section-box">
                                    <h4 class="section-title">
                                        <i class="fas fa-weight icon-mass"></i>
                                        H₂-Masse
                                    </h4>
                                    <div class="mass-display-box">
                                        <div class="mass-display-grid mb-half">
                                            <div class="mass-cell">
                                                <div class="mass-label">Gesamt:</div>
                                                <div class="mass-total mass-value">{{ group.massKg|number_format(2) }} kg</div>
                                            </div>
                                            <div class="mass-cell">
                                                <div class="mass-row">
                                                    <span>Nutzbar:</span>
                                                    <i class="fas fa-question-circle calculation-info-icon" 
                                                       data-type="usableMass" 
                                                       title="Berechnungsdetails anzeigen"></i>
                                                </div>
                                                <div class="mass-usable mass-value">{{ (group.usableMassKg ?? (group.massKg - 60.0))|number_format(2) }} kg</div>
                                            </div>
                                        </div>
                                        <div class="mass-display-grid">
                                            <div class="mass-cell">
                                                <div class="mass-label">Füllstand:</div>
                                                <div class="mass-filllevel mass-value-sm">{{ (group.fillLevelPercent ?? ((group.massKg / 1246.0) * 100))|number_format(1) }}%</div>
                                            </div>
                                            {% if group.tankCount is defined and group.tankCount is not null %}
                                            <div class="mass-cell">
                                                <div class="mass-label">Behälteranzahl:</div>
                                                <div class="mass-value-sm">{{ group.tankCount }}</div>
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
                </div>
            {% else %}
                <div class="status-card mb-2">
                    <div class="card-header">
                        <h3><i class="fas fa-layer-group text-primary"></i> Sensor-Sektionen</h3>
                    </div>
                    <div class="card-body">
                        <div class="empty-state-center">
                            <i class="fas fa-layer-group empty-state-icon"></i>
                            <h3 class="empty-state-title">Keine Sensor-Sektionen verfügbar</h3>
                            <p class="empty-state-text">
                                Es wurden keine Sensor-Sektionen für diesen Datalogger konfiguriert oder keine Daten sind verfügbar.
                            </p>
                            {% if is_granted('ROLE_ADMIN') %}
                            <a href="{{ path('app_hat_sensor_groups') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Sektionen konfigurieren
                            </a>
                            {% endif %}
                        </div>
                        {# Debug: Zeige Informationen über die Gruppen in der DB #}
                        {% if allGroups is defined and allGroups is not empty %}
                            <div class="debug-box">
                                <strong>Debug: Sektionen in DB gefunden, aber nicht verarbeitet:</strong>
                                <ul>
                                    {% for group in allGroups %}
                                        <li>
                                            <strong>{{ group.name }}</strong> (ID: {{ group.id }}, Type: {{ group.type ?? 'null' }}, Active: {{ group.active ? 'Ja' : 'Nein' }})
                                            <br>
                                            <small>
                                                Sensoren in Config: {{ group.sensors|length }},
                                                Show Average: {{ group.showAverage ? 'Ja' : 'Nein' }},
                                                Show Individual: {{ group.showIndividual ? 'Ja' : 'Nein' }}
                                            </small>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% else %}
            <div class="alert alert-warning hidden">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Hinweis:</strong> Keine Sensor-Sektionen konfiguriert. Bitte konfigurieren Sie Sektionen im Admin-Bereich.
            </div>
        {% endif %}
    </div>
</div>

</div>{# .hats-groups-modern #}

{# Modal für Berechnungsdetails #}
<div id="calculationInfoModal" class="modal-overlay">
    <div class="modal-box">
        <div class="modal-header">
            <h3 class="m-0 text-lg text-primary">
                <i class="fas fa-info-circle text-primary"></i> Berechnungsdetails
            </h3>
            <button id="closeCalculationModal" type="button" class="modal-close-btn" aria-label="Schließen">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div id="calculationInfoContent" class="calc-info-content">
            {# Wird per JavaScript gefüllt #}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
window.APP_HATS_GROUPS = {
    dataloggerId: {% if datalogger is defined %}{{ datalogger.id }}{% else %}null{% endif %},
    paths: {
        influxData: {{ (datalogger is defined ? path('app_hats_groups_influx_data', {id: datalogger.id}) : '')|json_encode|raw }},
        csvExport: {{ (datalogger is defined ? path('app_export_hats_groups_csv', {id: datalogger.id}) : '')|json_encode|raw }},
        pdfExport: {{ (datalogger is defined ? path('app_export_hats_groups_pdf', {id: datalogger.id}) : '')|json_encode|raw }},
        currentValues: {{ (datalogger is defined ? path('app_hats_groups_current_values', {id: datalogger.id}) : '')|json_encode|raw }},
        liveChartData: {{ (datalogger is defined ? path('app_hats_groups_live_chart_data', {id: datalogger.id}) : '')|json_encode|raw }},
        correlation: {{ (datalogger is defined ? path('app_hats_groups_correlation', {id: datalogger.id}) : '')|json_encode|raw }}
    }
};
</script>
<script src="{{ asset('js/hats-groups.js') }}"></script>
{% endblock %}