{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">Core CPMS – OCPP Commands</h1>
  <p class="text-muted">Steuerung verbundener Ladestationen über das Core CPMS.</p>

  <style>
    .sticky-chargepoint {
      position: sticky;
      top: 1rem;
      z-index: 1020;
    }
  </style>

  {% if error_message %}
  <div class="alert alert-danger" role="alert">{{ error_message }}</div>
  {% endif %}
  {% if success_message %}
  <div class="alert alert-success" role="alert">{{ success_message }}</div>
  {% endif %}
  {% if response_payload %}
  <div class="card mb-4">
    <div class="card-header pb-0">
      <h6 class="mb-0">Antwort des OCPP-Servers</h6>
    </div>
    <div class="card-body">
      <pre class="bg-light p-3 rounded text-sm">{% if response_payload is mapping or response_payload is sequence %}{{ response_payload | tojson(indent=2) | safe }}{% else %}{{ response_payload }}{% endif %}</pre>
      {% if response_payload is mapping and (response_payload.get('certificate') or response_payload.get('certificateChain')) %}
      <div class="mt-3">
        <label class="form-label text-xs text-uppercase text-secondary">CSR / Certificate Response (copy)</label>
        <textarea class="form-control" rows="6" readonly>{{ response_payload.get('certificate') or response_payload.get('certificateChain') }}</textarea>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% if fetch_error %}
  <div class="alert alert-warning" role="alert">
    <strong>Hinweis:</strong> Die Liste verbundener Ladestationen konnte nicht aktualisiert werden. Details: {{ fetch_error }}
  </div>
  {% endif %}

  {% if stations %}
  <div class="card mb-4">
    <div class="card-body pb-2">
      <div class="row g-3 align-items-end">
        <div class="col-lg-5 col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary" for="command-search">Befehle durchsuchen</label>
          <input type="search" class="form-control" id="command-search" placeholder="Titel oder Badge-Text durchsuchen">
          <div class="form-text">Filtert die Karten nach dem eingegebenen Suchbegriff.</div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-4 sticky-chargepoint">
    <div class="card-header pb-0">
      <h6 class="mb-0">Chargepoint ID auswählen</h6>
    </div>
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary" for="station-search">Chargepoint ID suchen</label>
          <input type="search" class="form-control" id="station-search" placeholder="Chargepoint ID tippen...">
          <div class="form-text" id="station-search-feedback">Stationen können nach ID durchsucht und automatisch ausgewählt werden.</div>
        </div>
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary" for="global-station-select">Chargepoint ID</label>
          <select class="form-select" id="global-station-select" aria-label="Chargepoint ID" required>
            <option value="">Bitte wählen</option>
            {% for station in stations %}
            <option
              value="{{ station.station_id }}"
              data-ocpp-version="{{ station.ocpp_version or '' }}"
              {% if station.station_id == selected_station %}selected{% endif %}
            >{{ station.station_id }}</option>
            {% endfor %}
          </select>
          <div class="invalid-feedback">Bitte zuerst eine Chargepoint ID auswählen.</div>
        </div>
        <div class="col-md-6">
          <div class="text-muted small">Diese Auswahl gilt für alle folgenden Befehle.</div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-md-12">
          <div class="text-sm">
            <span class="text-xs text-uppercase text-secondary">OCPP-Version</span>
            <div class="fw-semibold mt-1" id="ocpp-version-text">
              {% if selected_station %}
                {% if selected_station_version %}
                  Chargepoint ist mit OCPP {{ selected_station_version }} verbunden.
                {% else %}
                  Keine OCPP-Versionsinformation verfügbar.
                {% endif %}
              {% else %}
                Bitte eine Chargepoint ID auswählen.
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-body py-2">
      <div class="d-flex flex-wrap gap-2 align-items-center" id="ocpp-tab-nav">
        <div class="text-xs text-uppercase text-secondary fw-bold me-2 mb-1">Tabs</div>
        <button type="button" class="btn btn-outline-primary btn-sm active" data-tab-target="shared">Shared</button>
        <button type="button" class="btn btn-outline-primary btn-sm" data-tab-target="ocpp16">OCPP 1.6</button>
        <button type="button" class="btn btn-outline-primary btn-sm" data-tab-target="ocpp201">OCPP 2.0.1</button>
      </div>
    </div>
  </div>

  <div id="ocpp-tab-content">
    <div class="tab-pane" data-tab-pane="shared">
      <div class="accordion" id="sharedAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header" id="shared-heading-operations">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#shared-collapse-operations" aria-expanded="true" aria-controls="shared-collapse-operations">
              Betrieb &amp; Sitzungen
            </button>
          </h2>
          <div id="shared-collapse-operations" class="accordion-collapse collapse show" data-bs-parent="#sharedAccordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Change Availability</h6>
                      <span class="badge bg-secondary">OCPP 1.6 &amp; 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="change_availability">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Modus</label>
                          <select class="form-select" name="availability_type">
                            <option value="Operative">Operative</option>
                            <option value="Inoperative">Inoperative</option>
                          </select>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Connector ID</label>
                          <input type="number" class="form-control" name="availability_connector_id" value="0" min="0">
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>

                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Reboot</h6>
                      <span class="badge bg-secondary">OCPP 1.6 &amp; 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="reboot">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">Typ</label>
                          <select class="form-select" name="reset_type">
                            <option value="Hard">Hard</option>
                            <option value="Soft">Soft</option>
                          </select>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Unlock Connector</h6>
                      <span class="badge bg-secondary">OCPP 1.6 &amp; 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="unlock_connector">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">Connector ID</label>
                          <input type="number" class="form-control" name="unlock_connector_id" min="0" required>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>

                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Authorize</h6>
                      <span class="badge bg-secondary">OCPP 1.6 &amp; 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="authorize">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">ID Tag</label>
                          <input type="text" class="form-control" name="authorize_id_tag" placeholder="z. B. PnC_12345" required>
                        </div>
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">ISO 15118 Certificate Hash Data (optional)</label>
                          <textarea class="form-control" name="authorize_iso15118_hash_data" rows="4" placeholder='{"hashAlgorithm":"SHA256","issuerNameHash":"...","issuerKeyHash":"...","serialNumber":"..."}'></textarea>
                          <div class="form-text">JSON-Objekt mit Hash-Daten laut ISO 15118, falls vorhanden.</div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="shared-heading-configuration">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#shared-collapse-configuration" aria-expanded="false" aria-controls="shared-collapse-configuration">
              Konfiguration
            </button>
          </h2>
          <div id="shared-collapse-configuration" class="accordion-collapse collapse" data-bs-parent="#sharedAccordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Custom DataTransfer</h6>
                      <span class="badge bg-secondary">OCPP 1.6 &amp; 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="custom_datatransfer">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">Payload</label>
                          <textarea class="form-control" name="datatransfer_payload" rows="10" required>{{ datatransfer_example }}</textarea>
                          <div class="form-text">Anfrage wird an /api/pnc/ocpp-command gesendet und nutzt die ausgewählte Station.</div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <p class="text-muted mb-0">Weitere konfigurationsbezogene Befehle sind für diesen Tab nicht verfügbar.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="shared-heading-diagnose">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#shared-collapse-diagnose" aria-expanded="false" aria-controls="shared-collapse-diagnose">
              Diagnose
            </button>
          </h2>
          <div id="shared-collapse-diagnose" class="accordion-collapse collapse" data-bs-parent="#sharedAccordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Trigger Message</h6>
                      <span class="badge bg-secondary">OCPP 1.6 &amp; 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="trigger_message">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Message</label>
                          <select class="form-select" name="trigger_message_type" required>
                            <option value="">Bitte wählen</option>
                            <option value="BootNotification">BootNotification</option>
                            <option value="FirmwareStatusNotification">FirmwareStatusNotification</option>
                            <option value="Heartbeat">Heartbeat</option>
                            <option value="MeterValues">MeterValues</option>
                            <option value="StatusNotification">StatusNotification</option>
                          </select>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Connector ID (optional)</label>
                          <input type="number" class="form-control" name="trigger_message_connector_id" min="0">
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <p class="text-muted mb-0">Weitere Diagnosebefehle im Shared-Tab folgen in zukünftigen Updates.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="shared-heading-iso">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#shared-collapse-iso" aria-expanded="false" aria-controls="shared-collapse-iso">
              ISO 15118
            </button>
          </h2>
          <div id="shared-collapse-iso" class="accordion-collapse collapse" data-bs-parent="#sharedAccordion">
            <div class="accordion-body">
              <p class="text-muted mb-0">In diesem Tab sind keine ISO 15118 spezifischen Befehle verfügbar.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane d-none" data-tab-pane="ocpp16">
      <div class="accordion" id="ocpp16Accordion">
        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp16-heading-operations">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp16-collapse-operations" aria-expanded="true" aria-controls="ocpp16-collapse-operations">
              Betrieb &amp; Sitzungen
            </button>
          </h2>
          <div id="ocpp16-collapse-operations" class="accordion-collapse collapse show" data-bs-parent="#ocpp16Accordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Remote Start Transaction</h6>
                      <span class="badge bg-secondary">OCPP 1.6</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="remote_start">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Connector ID</label>
                          <input type="number" class="form-control" name="remote_start_connector_id" min="0" required>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">ID Token</label>
                          <input type="text" class="form-control" name="remote_start_id_tag" value="remote">
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Remote Stop Transaction</h6>
                      <span class="badge bg-secondary">OCPP 1.6</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="remote_stop">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">Transaction ID</label>
                          <input type="number" class="form-control" name="remote_stop_transaction_id" min="0" required>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp16-heading-configuration">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp16-collapse-configuration" aria-expanded="false" aria-controls="ocpp16-collapse-configuration">
              Konfiguration
            </button>
          </h2>
          <div id="ocpp16-collapse-configuration" class="accordion-collapse collapse" data-bs-parent="#ocpp16Accordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Change Configuration</h6>
                      <span class="badge bg-secondary">OCPP 1.6</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="change_configuration">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Key</label>
                          <input type="text" class="form-control" name="config_key" required>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Value</label>
                          <input type="text" class="form-control" name="config_value">
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Get Configuration (full)</h6>
                      <span class="badge bg-secondary">OCPP 1.6</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="get_configuration">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp16-heading-diagnose">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp16-collapse-diagnose" aria-expanded="false" aria-controls="ocpp16-collapse-diagnose">
              Diagnose
            </button>
          </h2>
          <div id="ocpp16-collapse-diagnose" class="accordion-collapse collapse" data-bs-parent="#ocpp16Accordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Trigger Diagnostic Upload</h6>
                      <span class="badge bg-secondary">OCPP 1.6</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="trigger_diagnostic_upload">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">FTP-Ziel</label>
                          <input type="text" class="form-control" name="diagnostic_location" value="ftp://diag:rem0tec0nnect2026x@217.160.79.201/" required>
                          <div class="form-text">Die Wallbox lädt das Diagnosepaket an diese Adresse hoch.</div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <p class="text-muted mb-0">Weitere Diagnosebefehle folgen bei Bedarf.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp16-heading-iso">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp16-collapse-iso" aria-expanded="false" aria-controls="ocpp16-collapse-iso">
              ISO 15118
            </button>
          </h2>
          <div id="ocpp16-collapse-iso" class="accordion-collapse collapse" data-bs-parent="#ocpp16Accordion">
            <div class="accordion-body">
              <p class="text-muted mb-0">Keine ISO 15118 spezifischen Befehle für OCPP 1.6.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane d-none" data-tab-pane="ocpp201">
      <div class="accordion" id="ocpp201Accordion">
        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp201-heading-operations">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp201-collapse-operations" aria-expanded="true" aria-controls="ocpp201-collapse-operations">
              Betrieb &amp; Sitzungen
            </button>
          </h2>
          <div id="ocpp201-collapse-operations" class="accordion-collapse collapse show" data-bs-parent="#ocpp201Accordion">
            <div class="accordion-body">
              <p class="text-muted mb-0">Für OCPP 2.0.1 sind hier aktuell keine spezifischen Befehle vorhanden.</p>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp201-heading-configuration">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp201-collapse-configuration" aria-expanded="false" aria-controls="ocpp201-collapse-configuration">
              Konfiguration
            </button>
          </h2>
          <div id="ocpp201-collapse-configuration" class="accordion-collapse collapse" data-bs-parent="#ocpp201Accordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Get Variables</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form" id="get-variables-form">
                        <input type="hidden" name="action" value="get_variables">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">Variablen</label>
                          <div id="get-variables-container" class="d-flex flex-column gap-3">
                            <div class="border rounded p-3 get-variables-item bg-light">
                              <div class="row g-3">
                                <div class="col-md-6">
                                  <label class="form-label text-xs text-uppercase text-secondary">Component Name</label>
                                  <input type="text" class="form-control" name="get_variables_component_name[]" required>
                                </div>
                                <div class="col-md-6">
                                  <label class="form-label text-xs text-uppercase text-secondary">Variable Name</label>
                                  <input type="text" class="form-control" name="get_variables_variable_name[]" required>
                                </div>
                                <div class="col-md-6">
                                  <label class="form-label text-xs text-uppercase text-secondary">Attribute Type (optional)</label>
                                  <select class="form-select" name="get_variables_attribute_type[]">
                                    <option value="">Automatisch</option>
                                    <option value="Actual">Actual</option>
                                    <option value="Target">Target</option>
                                    <option value="MinSet">MinSet</option>
                                    <option value="MaxSet">MaxSet</option>
                                  </select>
                                </div>
                                <div class="col-md-6">
                                  <label class="form-label text-xs text-uppercase text-secondary">Component Instance (optional)</label>
                                  <input type="text" class="form-control" name="get_variables_component_instance[]">
                                </div>
                                <div class="col-md-6">
                                  <label class="form-label text-xs text-uppercase text-secondary">Variable Instance (optional)</label>
                                  <input type="text" class="form-control" name="get_variables_variable_instance[]">
                                </div>
                                <div class="col-md-6">
                                  <label class="form-label text-xs text-uppercase text-secondary">EVSE ID (optional)</label>
                                  <input type="number" class="form-control" name="get_variables_evse_id[]" min="0">
                                </div>
                                <div class="col-md-6">
                                  <label class="form-label text-xs text-uppercase text-secondary">Connector ID (optional)</label>
                                  <input type="number" class="form-control" name="get_variables_connector_id[]" min="0">
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="mt-2">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="get-variables-add">+ Variable hinzufügen</button>
                          </div>
                          <div class="form-text">Mindestens ein Eintrag mit Component Name und Variable Name ist erforderlich.</div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <p class="text-muted mb-0">Weitere Konfigurationsbefehle werden hier ergänzt, sobald verfügbar.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp201-heading-diagnose">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp201-collapse-diagnose" aria-expanded="false" aria-controls="ocpp201-collapse-diagnose">
              Diagnose
            </button>
          </h2>
          <div id="ocpp201-collapse-diagnose" class="accordion-collapse collapse" data-bs-parent="#ocpp201Accordion">
            <div class="accordion-body">
              <div class="row">
                <div class="col-lg-6">
                  <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Get Base Report</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="get_base_report">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Request ID</label>
                          <input type="number" class="form-control" name="get_base_report_request_id" min="0" required>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Report Base</label>
                          <select class="form-select" name="get_base_report_report_base" required>
                            <option value="">Bitte wählen</option>
                            <option value="FullInventory">Full Inventory</option>
                            <option value="ConfigurationInventory">Configuration Inventory</option>
                            <option value="SummaryInventory">Summary Inventory</option>
                          </select>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">EVSE ID (optional)</label>
                          <input type="number" class="form-control" name="get_base_report_evse_id" min="0">
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Component Criteria (optional)</label>
                          <div class="d-flex flex-wrap gap-2">
                            {% set criteria_options = ["Active", "Available", "Enabled", "Problem"] %}
                            {% for option in criteria_options %}
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" name="get_base_report_component_criteria" value="{{ option }}" id="criteria-{{ option }}">
                              <label class="form-check-label" for="criteria-{{ option }}">{{ option }}</label>
                            </div>
                            {% endfor %}
                          </div>
                          <div class="form-text">Optionaler Filter für die Report-Erstellung.</div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <p class="text-muted mb-0">Weitere Diagnosebefehle für OCPP 2.0.1 können hier ergänzt werden.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="accordion-item">
          <h2 class="accordion-header" id="ocpp201-heading-iso">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ocpp201-collapse-iso" aria-expanded="false" aria-controls="ocpp201-collapse-iso">
              ISO 15118
            </button>
          </h2>
          <div id="ocpp201-collapse-iso" class="accordion-collapse collapse" data-bs-parent="#ocpp201Accordion">
            <div class="accordion-body">
              <div class="row g-3">
                <div class="col-lg-6">
                  <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Get Certificate (CSR)</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="get_certificate_csr">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">certificateType</label>
                          <select class="form-select" name="certificate_type" required>
                            <option value="">Bitte wählen</option>
                            <option value="V2GCertificateChain">V2GCertificateChain (CSR)</option>
                            <option value="V2GRootCertificate">V2GRootCertificate</option>
                            <option value="MORootCertificate">MORootCertificate</option>
                            <option value="CSMSRootCertificate">CSMSRootCertificate</option>
                          </select>
                          <div class="form-text">Standard-CSR-Abruf für ISO 15118. Meistens wird V2GCertificateChain verwendet.</div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Install Certificate</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="install_certificate">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">certificateType</label>
                          <select class="form-select" name="certificate_type" required>
                            <option value="">Bitte wählen</option>
                            <option value="V2GRootCertificate">V2GRootCertificate</option>
                            <option value="MORootCertificate">MORootCertificate</option>
                            <option value="CSMSRootCertificate">CSMSRootCertificate</option>
                          </select>
                        </div>
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">Certificate (PEM/base64)</label>
                          <textarea class="form-control" name="certificate_content" rows="4" required></textarea>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">CertificateSigned Request</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="certificate_signed">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">certificateType (optional)</label>
                          <select class="form-select" name="certificate_type">
                            <option value="">Automatisch</option>
                            <option value="V2GRootCertificate">V2GRootCertificate</option>
                            <option value="MORootCertificate">MORootCertificate</option>
                            <option value="CSMSRootCertificate">CSMSRootCertificate</option>
                          </select>
                          <div class="form-text">Nur angeben, falls das Zielzertifikat nicht eindeutig ist.</div>
                        </div>
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">Certificate Chain (PEM/base64)</label>
                          <textarea class="form-control" name="certificate_chain" rows="4" required></textarea>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row g-3 mt-1">
                <div class="col-lg-6">
                  <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Get Installed Certificate IDs</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="get_installed_certificate_ids">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">certificateType (optional)</label>
                          <select class="form-select" name="certificate_type">
                            <option value="">Alle</option>
                            <option value="V2GRootCertificate">V2GRootCertificate</option>
                            <option value="MORootCertificate">MORootCertificate</option>
                            <option value="CSMSRootCertificate">CSMSRootCertificate</option>
                          </select>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Delete Certificate</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="delete_certificate">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">hashAlgorithm</label>
                          <select class="form-select" name="hash_algorithm" required>
                            <option value="">Bitte wählen</option>
                            <option value="SHA256">SHA256</option>
                            <option value="SHA384">SHA384</option>
                            <option value="SHA512">SHA512</option>
                          </select>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">issuerNameHash</label>
                          <input type="text" class="form-control" name="issuer_name_hash" required>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">issuerKeyHash</label>
                          <input type="text" class="form-control" name="issuer_key_hash" required>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">serialNumber</label>
                          <input type="text" class="form-control" name="serial_number" required>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row g-3 mt-1">
                <div class="col-lg-6">
                  <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Get Certificate Status</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="get_certificate_status">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">hashAlgorithm</label>
                          <select class="form-select" name="hash_algorithm" required>
                            <option value="">Bitte wählen</option>
                            <option value="SHA256">SHA256</option>
                            <option value="SHA384">SHA384</option>
                            <option value="SHA512">SHA512</option>
                          </select>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">issuerNameHash</label>
                          <input type="text" class="form-control" name="issuer_name_hash" required>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">issuerKeyHash</label>
                          <input type="text" class="form-control" name="issuer_key_hash" required>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">serialNumber</label>
                          <input type="text" class="form-control" name="serial_number" required>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-start">
                      <h6 class="mb-0">Get 15118 EV Certificate</h6>
                      <span class="badge bg-secondary">OCPP 2.0.1</span>
                    </div>
                    <div class="card-body">
                      <form method="post" class="row g-3 ocpp-command-form">
                        <input type="hidden" name="action" value="get_15118_ev_certificate">
                        <input type="hidden" name="station_id" value="{{ selected_station }}">
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">exiRequest</label>
                          <textarea class="form-control" name="exi_request" rows="3" required></textarea>
                        </div>
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">iso15118SchemaVersion</label>
                          <input type="text" class="form-control" name="iso15118_schema_version" value="urn:iso:15118:2:2013:MsgDef" required>
                        </div>
                        <div class="col-12">
                          <label class="form-label text-xs text-uppercase text-secondary">ContractSignatureCertChain (optional)</label>
                          <textarea class="form-control" name="contract_signature_cert_chain" rows="2"></textarea>
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">EMAID (optional)</label>
                          <input type="text" class="form-control" name="emaid">
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">DH Public Key (optional)</label>
                          <input type="text" class="form-control" name="dh_public_key">
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Manufacturer ID (optional)</label>
                          <input type="text" class="form-control" name="manufacturer_id">
                        </div>
                        <div class="col-md-6">
                          <label class="form-label text-xs text-uppercase text-secondary">Serial Number (optional)</label>
                          <input type="text" class="form-control" name="serial_number">
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                          <button type="submit" class="btn btn-primary">Senden</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <template id="get-variables-template">
    <div class="border rounded p-3 get-variables-item bg-light">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary">Component Name</label>
          <input type="text" class="form-control" name="get_variables_component_name[]" required>
        </div>
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary">Variable Name</label>
          <input type="text" class="form-control" name="get_variables_variable_name[]" required>
        </div>
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary">Attribute Type (optional)</label>
          <select class="form-select" name="get_variables_attribute_type[]">
            <option value="">Automatisch</option>
            <option value="Actual">Actual</option>
            <option value="Target">Target</option>
            <option value="MinSet">MinSet</option>
            <option value="MaxSet">MaxSet</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary">Component Instance (optional)</label>
          <input type="text" class="form-control" name="get_variables_component_instance[]">
        </div>
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary">Variable Instance (optional)</label>
          <input type="text" class="form-control" name="get_variables_variable_instance[]">
        </div>
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary">EVSE ID (optional)</label>
          <input type="number" class="form-control" name="get_variables_evse_id[]" min="0">
        </div>
        <div class="col-md-6">
          <label class="form-label text-xs text-uppercase text-secondary">Connector ID (optional)</label>
          <input type="number" class="form-control" name="get_variables_connector_id[]" min="0">
        </div>
      </div>
    </div>
  </template>
  {% else %}
      <div class="alert alert-info" role="alert">Es sind aktuell keine Ladestationen verbunden.</div>
      {% endif %}
    </main>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const globalSelect = document.getElementById('global-station-select');
        const stationSearchInput = document.getElementById('station-search');
        const stationSearchFeedback = document.getElementById('station-search-feedback');
        const stationInputs = document.querySelectorAll('input[name="station_id"]');
        const commandForms = document.querySelectorAll('form.ocpp-command-form');
        const ocppVersionText = document.getElementById('ocpp-version-text');
        const searchInput = document.getElementById('command-search');
        const commandCards = Array.from(document.querySelectorAll('form.ocpp-command-form'))
          .map((form) => form.closest('.card'))
          .filter((card) => !!card);

        const updateOcppVersionDisplay = () => {
          if (!globalSelect || !ocppVersionText) {
            return;
          }
          const selectedOption = globalSelect.selectedOptions[0];
          const selectedValue = globalSelect.value.trim();
          if (!selectedValue) {
            ocppVersionText.textContent = 'Bitte eine Chargepoint ID auswählen.';
            return;
          }
          const version = selectedOption?.dataset?.ocppVersion?.trim();
          ocppVersionText.textContent = version
            ? `Chargepoint ist mit OCPP ${version} verbunden.`
            : 'Keine OCPP-Versionsinformation verfügbar.';
        };

        const propagateStation = () => {
          const value = globalSelect?.value?.trim() || '';
          stationInputs.forEach((input) => {
            input.value = value;
          });
          updateOcppVersionDisplay();
        };

        commandForms.forEach((form) => {
          form.addEventListener('submit', (event) => {
            if (!globalSelect || !globalSelect.value.trim()) {
              event.preventDefault();
              if (globalSelect) {
                globalSelect.classList.add('is-invalid');
                globalSelect.focus();
              }
            } else if (globalSelect) {
              globalSelect.classList.remove('is-invalid');
            }
          });
        });

        if (globalSelect) {
          globalSelect.addEventListener('change', propagateStation);
          propagateStation();
        }

        const selectStationFromSearch = () => {
          if (!stationSearchInput || !globalSelect) {
            return;
          }
          const query = stationSearchInput.value.trim().toLowerCase();
          const options = Array.from(globalSelect.options).filter((option) => option.value);

          if (!query) {
            stationSearchInput.classList.remove('is-invalid');
            if (stationSearchFeedback) {
              stationSearchFeedback.textContent = 'Stationen können nach ID durchsucht und automatisch ausgewählt werden.';
              stationSearchFeedback.classList.remove('text-danger');
            }
            return;
          }

          const match = options.find((option) => option.value.toLowerCase().includes(query));
          if (match) {
            globalSelect.value = match.value;
            stationSearchInput.classList.remove('is-invalid');
            if (stationSearchFeedback) {
              stationSearchFeedback.textContent = `Gefundene Station: ${match.value}`;
              stationSearchFeedback.classList.remove('text-danger');
            }
            propagateStation();
          } else {
            stationSearchInput.classList.add('is-invalid');
            if (stationSearchFeedback) {
              stationSearchFeedback.textContent = 'Keine Station mit dieser ID gefunden.';
              stationSearchFeedback.classList.add('text-danger');
            }
          }
        };

        if (stationSearchInput) {
          stationSearchInput.addEventListener('input', selectStationFromSearch);
        }

        const datatransferForm = document.querySelector('input[name="action"][value="custom_datatransfer"]')?.closest('form');
        const payloadTextarea = datatransferForm?.querySelector('textarea[name="datatransfer_payload"]');

        if (globalSelect && payloadTextarea) {
          const stationPattern = /(\"station_id\"\s*:\s*\")([^\"]*)(\")/;

          const updateStationInPayload = () => {
            const selectedStation = globalSelect.value.trim();
            if (!selectedStation) {
              return;
            }
            const currentPayload = payloadTextarea.value;
            if (stationPattern.test(currentPayload)) {
              payloadTextarea.value = currentPayload.replace(
                stationPattern,
                `$1${selectedStation}$3`,
              );
            }
          };

          globalSelect.addEventListener('change', updateStationInPayload);
          updateStationInPayload();
        }

        const variablesTemplate = document.getElementById('get-variables-template');
        const variablesContainer = document.getElementById('get-variables-container');
        const addVariablesButton = document.getElementById('get-variables-add');

        if (variablesTemplate && variablesContainer && addVariablesButton) {
          addVariablesButton.addEventListener('click', () => {
            const clone = variablesTemplate.content.cloneNode(true);
            variablesContainer.appendChild(clone);
          });
        }

        const filterCommands = () => {
          if (!searchInput || !commandCards.length) {
            return;
          }
          const query = searchInput.value.trim().toLowerCase();
          commandCards.forEach((card) => {
            const headerText = card.querySelector('.card-header h6')?.textContent?.toLowerCase() || '';
            const badgeText = card.querySelector('.card-header .badge')?.textContent?.toLowerCase() || '';
            const haystack = `${headerText} ${badgeText}`.trim();
            const matches = !query || haystack.includes(query);
            card.classList.toggle('d-none', !matches);
          });
        };

        if (searchInput && commandCards.length) {
          searchInput.addEventListener('input', filterCommands);
          filterCommands();
        }

        const tabButtons = document.querySelectorAll('[data-tab-target]');
        const tabPanes = document.querySelectorAll('[data-tab-pane]');

        if (tabButtons.length && tabPanes.length) {
          const setActiveTab = (target) => {
            tabButtons.forEach((button) => {
              const isActive = button.dataset.tabTarget === target;
              button.classList.toggle('active', isActive);
            });
            tabPanes.forEach((pane) => {
              const isActive = pane.dataset.tabPane === target;
              pane.classList.toggle('d-none', !isActive);
              pane.classList.toggle('active', isActive);
            });
          };

          setActiveTab(tabButtons[0].dataset.tabTarget);

          tabButtons.forEach((button) => {
            button.addEventListener('click', () => setActiveTab(button.dataset.tabTarget));
          });
        }
      });
    </script>
    {% endblock %}