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

{% block title %}Datalogger Detail - {{ datalogger.name }}{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Home</a>
        <i class="fas fa-chevron-right"></i>
        <span>Datalogger</span>
    </div>
    <div class="page-title">
        <h2>{{ datalogger.name }}</h2>
        <small class="text-secondary">{% if overviewLocation is defined and overviewLocation %}<i class="fas fa-map-marker-alt"></i> {{ overviewLocation }}{% endif %}</small>
    </div>
</div>

<div class="detail-header-modern">
    <div class="detail-status-badge {{ apiAvailable ? 'online' : 'offline' }}">
        <i class="fas fa-{{ apiAvailable ? 'check-circle' : 'times-circle' }}"></i>
        {{ apiAvailable ? 'Online' : 'Offline' }}
    </div>
</div>

{% if not apiAvailable %}
<div class="alert alert-warning mb-15">
    <i class="fas fa-exclamation-triangle"></i>
    <strong>Warnung:</strong> Datalogger API ist nicht erreichbar. Einige Funktionen sind möglicherweise nicht verfügbar.
</div>
{% endif %}

{{ tabs.renderTabs(datalogger, app.request.attributes.get('_route')) }}

<div class="detail-content datalogger-overview-modern">
    <!-- Quick Stats -->
    <div class="quick-stats-block">
        <div class="quick-stats-grid quick-stats-grid-status">
            {% if overviewLocation is defined and overviewLocation %}
            <div class="quick-stat-card">
                <div class="quick-stat-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="quick-stat-content">
                    <div class="quick-stat-label">Standort</div>
                    <div class="quick-stat-value">{{ overviewLocation }}</div>
                </div>
            </div>
            {% endif %}
            <div class="quick-stat-card">
                <div class="quick-stat-icon">
                    <i class="fas fa-link"></i>
                </div>
                <div class="quick-stat-content">
                    <div class="quick-stat-label">API Status</div>
                    <div class="quick-stat-value">{{ apiAvailable ? 'Erreichbar' : 'Nicht erreichbar' }}</div>
                </div>
            </div>
            <div class="quick-stat-card">
                <div class="quick-stat-icon">
                    <i class="fas fa-{{ apiAvailable ? 'check-circle' : 'times-circle' }}"></i>
                </div>
                <div class="quick-stat-content">
                    <div class="quick-stat-label">Verbindung</div>
                    <div class="quick-stat-value">{{ apiAvailable ? 'Aktiv' : 'Inaktiv' }}</div>
                </div>
            </div>
        </div>

        {% set topTotals = sectionTotals is defined and sectionTotals is not null ? sectionTotals : null %}
        <div class="quick-stats-grid quick-stats-grid-kpi">
            <div class="quick-stat-card quick-stat-card-kpi quick-stat-card-kpi-temp">
                <div class="quick-stat-icon">
                    <i class="fas fa-thermometer-half"></i>
                </div>
                <div class="quick-stat-content">
                    <div class="quick-stat-label">Durchschnittstemp.</div>
                    <div class="quick-stat-value">{{ topTotals and topTotals.temperature is not null ? topTotals.temperature|number_format(2) ~ '°C' : '--' }}</div>
                </div>
            </div>
            <div class="quick-stat-card quick-stat-card-kpi quick-stat-card-kpi-pressure">
                <div class="quick-stat-icon">
                    <i class="fas fa-tachometer-alt"></i>
                </div>
                <div class="quick-stat-content">
                    <div class="quick-stat-label">Durchschnittsdruck</div>
                    <div class="quick-stat-value">{{ topTotals and topTotals.pressure is not null ? topTotals.pressure|number_format(2) ~ ' bar(g)' : '--' }}</div>
                </div>
            </div>
            <div class="quick-stat-card quick-stat-card-kpi quick-stat-card-kpi-mass">
                <div class="quick-stat-icon">
                    <i class="fas fa-weight"></i>
                </div>
                <div class="quick-stat-content">
                    <div class="quick-stat-label">Aktuelle Gesamtmasse</div>
                    <div class="quick-stat-value">{{ topTotals and topTotals.massKg is not null ? topTotals.massKg|number_format(2) ~ ' kg' : '--' }}</div>
                </div>
            </div>
            <div class="quick-stat-card quick-stat-card-kpi quick-stat-card-kpi-fill">
                <div class="quick-stat-icon">
                    <i class="fas fa-percentage"></i>
                </div>
                <div class="quick-stat-content">
                    <div class="quick-stat-label">Füllstand</div>
                    <div class="quick-stat-value">{{ topTotals and topTotals.fillLevelPercent is not null ? topTotals.fillLevelPercent|number_format(1) ~ '%' : '--' }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="info-card-modern sections-overview-card">
        <h3><i class="fas fa-layer-group"></i> Sektionen - Werte im Überblick</h3>
        <div id="sections-overview-content" data-load-url="{{ path('app_datalogger_sections_overview', {id: datalogger.id}) }}">
            {% include 'dashboard/_sections_overview_content.html.twig' with {'sensorGroups': {'groups': sectionGroups|default([]), 'totals': sectionTotals|default(null)}} %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('sections-overview-content');
    if (!el) return;
    var url = el.getAttribute('data-load-url');
    if (!url) return;

    fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function(r) { return r.ok ? r.json() : null; })
        .then(function(payload) {
            if (!payload || !payload.success || typeof payload.html !== 'string') return;
            el.innerHTML = payload.html;
        })
        .catch(function() {});
});
</script>
{% endblock %}