{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">{{ _('Plug & Charge – Hubject API') }}</h1>
  <p class="text-muted">{{ _('Manage base URL, authorization, and timeout for Hubject.') }}</p>

  {% if error %}
  <div class="alert alert-danger" role="alert">{{ error }}</div>
  {% endif %}
  {% if message %}
  <div class="alert alert-success" role="alert">{{ message }}</div>
  {% endif %}

  <div class="card">
    <div class="card-header pb-0">
      <h6 class="mb-0">{{ _('Hubject API settings') }}</h6>
    </div>
    <div class="card-body">
      <form method="post" class="row g-3">
        <div class="col-12">
          <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Base URL*') }}</label>
          <input type="url" class="form-control" name="api_base_url" value="{{ api_base_url }}" required placeholder="https://service.hubject.com/api/oicp/">
        </div>
        <div class="col-12">
          <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Authorization header') }}</label>
          <input type="text" class="form-control" name="authorization" value="{{ authorization }}" placeholder="{{ _('e.g. Basic ... or Bearer ...') }}">
          <div class="form-text">{{ _('Leave empty if no additional header is required.') }}</div>
        </div>
        <div class="col-md-6">
          <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Operator ID') }}</label>
          <input type="text" class="form-control" name="operator_id" value="{{ operator_id }}" placeholder="{{ _('Optional for CDR/Push calls') }}">
        </div>
        <div class="col-md-6">
          <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Timeout (seconds)') }}</label>
          <input type="number" min="1" step="1" class="form-control" name="timeout" value="{{ timeout }}">
        </div>
        <div class="col-md-6">
          <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Client certificate path') }}</label>
          <input type="text" class="form-control" name="client_cert" value="{{ client_cert }}" placeholder="certs/client_cert.pem">
        </div>
        <div class="col-md-6">
          <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Client key path') }}</label>
          <input type="text" class="form-control" name="client_key" value="{{ client_key }}" placeholder="certs/client_key.key">
        </div>
        <div class="col-md-6">
          <label class="form-label text-uppercase text-xxs text-secondary">{{ _('CA bundle path') }}</label>
          <input type="text" class="form-control" name="ca_bundle" value="{{ ca_bundle }}" placeholder="certs/ca_bundle.crt">
        </div>
        <div class="col-12">
          {% if mtls_ready %}
          <div class="alert alert-success py-2 mb-0" role="status">
            {{ _('mTLS-Pfade gesetzt, Dateien vorhanden.') }}
          </div>
          {% else %}
          <div class="alert alert-warning py-2 mb-0" role="status">
            {{ _('mTLS-Konfiguration unvollständig – Details siehe unten.') }}
          </div>
          {% endif %}
        </div>
        <div class="col-12 d-flex justify-content-end">
          <button type="submit" class="btn btn-primary">{{ _('Save') }}</button>
        </div>
      </form>
      <form method="post" class="mt-3">
        <input type="hidden" name="action" value="reload">
        <button type="submit" class="btn btn-outline-secondary btn-sm">{{ _('Konfiguration neu laden') }}</button>
      </form>
      <div class="mt-4">
        {% if mtls_ready %}
        <div class="alert alert-success py-2 mb-3" role="status">
          {{ _('mTLS-Zertifikate vollständig und lesbar vorhanden.') }}
        </div>
        {% else %}
        <div class="alert alert-warning py-2 mb-3" role="status">
          {{ _('mTLS-Konfiguration unvollständig:') }}
          {% set labels = {
            'client_cert': _('Client-Zertifikat'),
            'client_key': _('Private Key'),
            'ca_bundle': _('CA-Bundle'),
          } %}
          <ul class="mb-0 ps-3">
            {% for item in mtls_missing %}
            <li>{{ labels.get(item, item) }} {{ _('fehlt') }}</li>
            {% endfor %}
            {% for item in mtls_unreadable %}
            <li>{{ _('Keine Leserechte für') }} {{ labels.get(item, item) }}</li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}

        <div class="row g-3 align-items-start">
          <div class="col-lg-7">
            <div class="table-responsive">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Typ') }}</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Ablageort') }}</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Letzte Änderung') }}</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Integrität') }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for key, label in {
                    'client_cert': _('Client-Zertifikat'),
                    'client_key': _('Privater Schlüssel'),
                    'ca_bundle': _('CA-Bundle'),
                  }.items() %}
                  {% set cert = certs.get(key, {}) %}
                  <tr>
                    <td class="align-middle text-sm">{{ label }}</td>
                    <td class="align-middle text-sm">
                      <div class="fw-bold">{{ cert.filename }}</div>
                      <div class="text-xs text-secondary">{{ cert.directory }}</div>
                    </td>
                    <td class="align-middle text-sm">
                      {% if cert.last_modified %}
                        {{ cert.last_modified }}
                      {% else %}
                        –
                      {% endif %}
                    </td>
                    <td class="align-middle text-sm">
                      {% if cert.error %}
                        <span class="badge bg-gradient-danger">{{ _('Fehlerhafte Datei') }}</span>
                        <div class="text-xs text-secondary">{{ cert.error }}</div>
                      {% elif cert.exists and cert.readable %}
                        <span class="badge bg-gradient-success">{{ _('Lesbar') }}</span>
                      {% elif cert.exists %}
                        <span class="badge bg-gradient-warning">{{ _('Nicht lesbar') }}</span>
                      {% else %}
                        <span class="badge bg-gradient-secondary">{{ _('Fehlt') }}</span>
                      {% endif %}
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="card border shadow-none">
              <div class="card-body">
                <h6 class="mb-3">{{ _('Zertifikate hochladen') }}</h6>
                <form method="post" enctype="multipart/form-data" class="row g-3">
                  <input type="hidden" name="action" value="upload">
                  <div class="col-12">
                    <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Client-Zertifikat') }}</label>
                    <input type="file" class="form-control" name="client_cert" accept=".pem,.crt,.cer,.der">
                    <div class="form-text">{{ _('Wird unter dem aktuell konfigurierten Pfad gespeichert.') }}</div>
                  </div>
                  <div class="col-12">
                    <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Privater Schlüssel') }}</label>
                    <input type="file" class="form-control" name="client_key" accept=".pem,.key">
                  </div>
                  <div class="col-12">
                    <label class="form-label text-uppercase text-xxs text-secondary">{{ _('CA-Bundle') }}</label>
                    <input type="file" class="form-control" name="ca_bundle" accept=".pem,.crt,.cer,.der">
                  </div>
                  <div class="col-12 d-flex justify-content-end">
                    <button type="submit" class="btn btn-outline-primary">{{ _('Upload starten') }}</button>
                  </div>
                  <p class="text-xs text-muted mb-0">{{ _('Max. 2 MB pro Datei. Zertifikate und Schlüssel werden an den Hubject-Konfigurationspfaden abgelegt.') }}</p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}