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

{% block title %}Datalogger-Verwaltung{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumbs">
        <a href="{{ path('app_dashboard') }}">Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <span>Datalogger-Verwaltung</span>
    </div>
    <div class="delivery-page-header">
        <h1><i class="fas fa-server"></i> Datalogger-Verwaltung</h1>
        <a href="{{ path('app_datalogger_admin_create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Neuen Datalogger anlegen
        </a>
    </div>
</div>

{% for message in app.flashes('success') %}
    <div class="alert alert-success">
        <i class="fas fa-check-circle"></i>
        <span>{{ message }}</span>
    </div>
{% endfor %}
{% for message in app.flashes('error') %}
    <div class="alert alert-error">
        <i class="fas fa-exclamation-circle"></i>
        <span>{{ message }}</span>
    </div>
{% endfor %}

<div class="content-card">
    {% if dataloggers is empty %}
        <div class="empty-state-card">
            <i class="fas fa-server empty-state-icon-user"></i>
            <p>Noch keine Datalogger angelegt.</p>
            <a href="{{ path('app_datalogger_admin_create') }}" class="btn btn-primary mt-1">
                <i class="fas fa-plus"></i> Ersten Datalogger anlegen
            </a>
        </div>
    {% else %}
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Standort</th>
                        <th>API-URL</th>
                        <th>Status</th>
                        <th>Letztes Signal</th>
                        <th>QR Schadenmeldung</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dl in dataloggers %}
                    <tr>
                        <td>
                            <strong>{{ dl.name }}</strong>
                            {% if dl.description %}
                                <div class="text-secondary text-xs">{{ dl.description }}</div>
                            {% endif %}
                        </td>
                        <td>{{ dl.location ?? '–' }}</td>
                        <td class="text-xs font-mono">{% set apiUrlFull = (dl.apiBaseUrl starts with 'http') ? dl.apiBaseUrl : ('http://' ~ dl.apiBaseUrl) %}<a href="{{ apiUrlFull }}" target="_blank" rel="noopener noreferrer" class="link-modern">{{ dl.apiBaseUrl|slice(0, 40) }}{% if dl.apiBaseUrl|length > 40 %}…{% endif %}</a></td>
                        <td>
                            {% if dl.active %}
                                <span class="badge badge-success"><i class="fas fa-check-circle"></i> Aktiv</span>
                            {% else %}
                                <span class="badge badge-danger"><i class="fas fa-times-circle"></i> Inaktiv</span>
                            {% endif %}
                        </td>
                        <td>{{ dl.lastSeen ? dl.lastSeen|date('d.m.Y H:i') : '–' }}</td>
                        <td>
                            {% if dl.qrPublicToken %}
                                <a href="{{ path('app_trailer_damage_public', {token: dl.qrPublicToken}) }}" target="_blank" rel="noopener" class="btn btn-secondary btn-small">
                                    <i class="fas fa-external-link-alt"></i> Formular
                                </a>
                                <a href="{{ path('app_trailer_damage_qr_image', {token: dl.qrPublicToken}) }}" target="_blank" rel="noopener" class="btn btn-secondary btn-small">
                                    <i class="fas fa-qrcode"></i> QR
                                </a>
                            {% else %}
                                <span class="text-secondary">wird erzeugt</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ path('app_datalogger_detail', {id: dl.id}) }}" class="btn btn-secondary btn-small">
                                <i class="fas fa-chart-line"></i> Dashboard
                            </a>
                            <a href="{{ path('app_datalogger_admin_edit', {id: dl.id}) }}" class="btn btn-secondary btn-small">
                                <i class="fas fa-edit"></i> Bearbeiten
                            </a>
                            <form method="post" action="{{ path('app_datalogger_admin_toggle_active', {id: dl.id}) }}" class="form-inline form-inline-btn">
                                <input type="hidden" name="_token" value="{{ csrf_token('datalogger_toggle_' ~ dl.id) }}">
                                <button type="submit" class="btn {{ dl.active ? 'btn-warning' : 'btn-success' }} btn-small">
                                    <i class="fas fa-{{ dl.active ? 'pause' : 'play' }}"></i> {{ dl.active ? 'Deaktivieren' : 'Aktivieren' }}
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>
{% endblock %}