{% 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 – OCPP Certificates') }}</h1>
  <p class="text-muted">{{ _('Trigger OCPP certificate management calls (15118 root/leaf lifecycle) to connected stations.') }}</p>

  {% if fetch_error %}
  <div class="alert alert-warning" role="alert">{{ _('Connected stations list could not be loaded: {error}') | replace('{error}', fetch_error) }}</div>
  {% endif %}
  {% 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 %}

  <div class="row">
    <div class="col-lg-7">
      <div class="card mb-4">
        <div class="card-header pb-0">
          <h6 class="mb-1">{{ _('Compose certificate request') }}</h6>
          <p class="text-sm text-muted mb-0">{{ _('Install/renew EVSE certificates, list installed certificates, or delete certificates via OCPP.') }}</p>
        </div>
        <div class="card-body">
          <form method="post" class="row g-3">
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Station') }}</label>
              <select class="form-select" name="station_id" required>
                <option value="">{{ _('Please choose') }}</option>
                {% for station in stations %}
                <option value="{{ station.station_id }}" {% if station.station_id == selected_station %}selected{% endif %}>
                  {{ station.station_id }} ({{ station.availability_display }})
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Action') }}</label>
              <select class="form-select" name="action" required>
                <option value="">{{ _('Please choose') }}</option>
                <option value="install_certificate" {% if selected_action == 'install_certificate' %}selected{% endif %}>InstallCertificate</option>
                <option value="certificate_signed" {% if selected_action == 'certificate_signed' %}selected{% endif %}>CertificateSigned</option>
                <option value="get_installed_certificate_ids" {% if selected_action == 'get_installed_certificate_ids' %}selected{% endif %}>GetInstalledCertificateIds</option>
                <option value="delete_certificate" {% if selected_action == 'delete_certificate' %}selected{% endif %}>DeleteCertificate</option>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Certificate type') }}</label>
              <select class="form-select" name="certificate_type">
                <option value="">{{ _('Optional for GetInstalledCertificateIds') }}</option>
                <option value="V2GRootCertificate" {% if certificate_type == 'V2GRootCertificate' %}selected{% endif %}>V2GRootCertificate</option>
                <option value="MORootCertificate" {% if certificate_type == 'MORootCertificate' %}selected{% endif %}>MORootCertificate</option>
                <option value="CSMSRootCertificate" {% if certificate_type == 'CSMSRootCertificate' %}selected{% endif %}>CSMSRootCertificate</option>
              </select>
              <div class="form-text">{{ _('Required for InstallCertificate, optional filter for GetInstalledCertificateIds.') }}</div>
            </div>
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Hash algorithm (DeleteCertificate)') }}</label>
              <select class="form-select" name="hash_algorithm">
                <option value="">{{ _('Choose if deleting') }}</option>
                <option value="SHA256" {% if hash_algorithm == 'SHA256' %}selected{% endif %}>SHA256</option>
                <option value="SHA384" {% if hash_algorithm == 'SHA384' %}selected{% endif %}>SHA384</option>
                <option value="SHA512" {% if hash_algorithm == 'SHA512' %}selected{% endif %}>SHA512</option>
              </select>
            </div>

            <div class="col-12">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Certificate / chain (base64 or PEM)') }}</label>
              <textarea class="form-control" name="certificate" rows="4" placeholder="{{ _('InstallCertificate certificate or CertificateSigned chain') }}">{{ certificate_content }}</textarea>
              <div class="form-text">{{ _('Paste PEM or base64 content for InstallCertificate or CertificateSigned.') }}</div>
            </div>

            <div class="col-md-4">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('issuerNameHash') }}</label>
              <input type="text" class="form-control" name="issuer_name_hash" value="{{ issuer_name_hash }}" placeholder="{{ _('DeleteCertificate only') }}">
            </div>
            <div class="col-md-4">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('issuerKeyHash') }}</label>
              <input type="text" class="form-control" name="issuer_key_hash" value="{{ issuer_key_hash }}" placeholder="{{ _('DeleteCertificate only') }}">
            </div>
            <div class="col-md-4">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('serialNumber') }}</label>
              <input type="text" class="form-control" name="serial_number" value="{{ serial_number }}" placeholder="{{ _('DeleteCertificate only') }}">
            </div>

            <div class="col-12 d-flex justify-content-end">
              <button type="submit" class="btn btn-primary">{{ _('Send request') }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card mb-4">
        <div class="card-header pb-0">
          <h6 class="mb-1">{{ _('Connected stations') }}</h6>
          <p class="text-sm text-muted mb-0">{{ _('Check the connection before triggering certificate calls.') }}</p>
        </div>
        <div class="card-body px-0 pt-0 pb-2">
          <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">{{ _('Station') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Since') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Connectors') }}</th>
                </tr>
              </thead>
              <tbody>
                {% for station in stations %}
                <tr>
                  <td class="align-middle text-sm fw-bold">{{ station.station_id }}</td>
                  <td class="align-middle text-sm">
                    <div>{{ station.connected_since_display or '–' }}</div>
                    <span class="badge {{ station.availability_badge_class }} mt-1">{{ station.availability_display }}</span>
                  </td>
                  <td class="align-middle text-sm">
                    {% if station.connectors %}
                    <ul class="mb-0">
                      {% for connector in station.connectors %}
                      <li class="text-xs">{{ connector.connector_id }} – {{ connector.status }}{% if connector.transaction_id %} (TX {{ connector.transaction_id }}){% endif %}{% if connector.start_method %} [{{ connector.start_method }}]{% endif %}</li>
                      {% endfor %}
                    </ul>
                    {% else %}
                    <span class="text-secondary text-xs">{{ _('No details') }}</span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header pb-0">
          <h6 class="mb-1">{{ _('Response / audit') }}</h6>
          <p class="text-sm text-muted mb-0">{{ _('Shows the structured results of the last certificate action.') }}</p>
        </div>
        <div class="card-body">
          {% if response_payload %}
          <pre class="bg-light p-3 rounded border border-1">{{ response_payload | tojson(indent=2) }}</pre>
          {% else %}
          <p class="text-sm text-secondary mb-0">{{ _('No action executed yet.') }}</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}