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

{% block title %}{{ isEdit ? 'Datalogger bearbeiten' : 'Neuer Datalogger' }}{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumbs">
        <a href="{{ path('app_dashboard') }}">Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <a href="{{ path('app_datalogger_admin_list') }}">Datalogger-Verwaltung</a>
        <i class="fas fa-chevron-right"></i>
        <span>{{ isEdit ? 'Bearbeiten' : 'Neu' }}</span>
    </div>
    <h1><i class="fas fa-server"></i> {{ isEdit ? 'Datalogger bearbeiten' : 'Neuen Datalogger anlegen' }}</h1>
</div>

{% 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 form-card">
    <form method="post" action="{{ isEdit ? path('app_datalogger_admin_edit', {id: datalogger.id}) : path('app_datalogger_admin_create') }}">
        <input type="hidden" name="_token" value="{{ csrf_token(isEdit ? 'datalogger_edit_' ~ datalogger.id : 'datalogger_create') }}">
        <div class="form-section">
            <label for="name" class="form-label-block">Name *</label>
            <input type="text" id="name" name="name" value="{{ datalogger.name }}" required maxlength="255" class="form-input-full" placeholder="z.B. HRS Berlin">
        </div>
        <div class="form-section">
            <label for="description" class="form-label-block">Beschreibung</label>
            <input type="text" id="description" name="description" value="{{ datalogger.description ?? '' }}" maxlength="255" class="form-input-full" placeholder="Optionale Kurzbeschreibung">
        </div>
        <div class="form-section">
            <label for="location" class="form-label-block">Standort</label>
            <input type="text" id="location" name="location" value="{{ datalogger.location ?? '' }}" maxlength="100" class="form-input-full" placeholder="z.B. Hamm, Düsseldorf">
        </div>
        <div class="form-section">
            <label for="apiBaseUrl" class="form-label-block">API-Basis-URL *</label>
            <input type="url" id="apiBaseUrl" name="apiBaseUrl" value="{{ datalogger.apiBaseUrl }}" required maxlength="255" class="form-input-full" placeholder="https://...">
        </div>
        <div class="form-section">
            <label for="gpsApiBaseUrl" class="form-label-block">GPS-API-URL (optional)</label>
            <input type="url" id="gpsApiBaseUrl" name="gpsApiBaseUrl" value="{{ datalogger.gpsApiBaseUrl ?? '' }}" maxlength="255" class="form-input-full" placeholder="Leer = gleiche wie API-Basis-URL">
        </div>
        {% if isEdit %}
        {% if datalogger.qrPublicToken %}
        <div class="form-section">
            <label class="form-label-block">QR-Schadenmeldung</label>
            <div class="flex gap-half flex-wrap align-center">
                <a href="{{ path('app_trailer_damage_public', {token: datalogger.qrPublicToken}) }}" target="_blank" rel="noopener" class="btn btn-secondary btn-small">
                    <i class="fas fa-external-link-alt"></i> Öffentliche Meldeseite
                </a>
                <a href="{{ path('app_trailer_damage_qr_image', {token: datalogger.qrPublicToken}) }}" target="_blank" rel="noopener" class="btn btn-secondary btn-small">
                    <i class="fas fa-qrcode"></i> QR-Code öffnen
                </a>
            </div>
        </div>
        {% endif %}
        <div class="form-section">
            <label class="checkbox-label">
                <input type="checkbox" name="active" value="1" {{ datalogger.active ? 'checked' : '' }}>
                <span>Datalogger aktiv (in Dashboard und Auswahlen sichtbar)</span>
            </label>
        </div>
        {% endif %}
        <div class="form-actions">
            <a href="{{ path('app_datalogger_admin_list') }}" class="btn-cancel">Abbrechen</a>
            <button type="submit" class="btn-submit"><i class="fas fa-save"></i> Speichern</button>
        </div>
    </form>
</div>
{% endblock %}