{% 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 – Certificates') }}</h1>
  <p class="text-muted">{{ _('Manage Hubject mTLS artifacts for Plug & Charge.') }}</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="row">
    <div class="col-lg-7">
      <div class="card mb-4">
        <div class="card-header pb-0 d-flex align-items-center justify-content-between">
          <div>
            <h6 class="mb-0">{{ _('Certificate overview') }}</h6>
            <p class="text-sm text-muted mb-0">{{ _('Current storage paths, expiration dates, and validity.') }}</p>
          </div>
        </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">{{ _('Type') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Path') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Last modified') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Expiration') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Status') }}</th>
                </tr>
              </thead>
              <tbody>
                {% for key, label in {
                  'client_cert': _('Client certificate'),
                  'client_key': _('Private key'),
                  '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.expires is string %}
                      {{ cert.expires }}
                    {% elif cert.expires %}
                      {{ cert.expires }}
                    {% else %}
                      –
                    {% endif %}
                  </td>
                  <td class="align-middle text-sm">
                    {% if cert.error %}
                    <span class="badge bg-gradient-danger">{{ _('Error reading file') }}</span>
                    <div class="text-xs text-secondary">{{ cert.error }}</div>
                    {% elif cert.exists and cert.readable %}
                    <span class="badge bg-gradient-success">{{ _('Found & readable') }}</span>
                    {% elif cert.exists %}
                    <span class="badge bg-gradient-warning">{{ _('Found but not readable') }}</span>
                    {% else %}
                    <span class="badge bg-gradient-secondary">{{ _('Missing') }}</span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card mb-4">
        <div class="card-header pb-0">
          <h6 class="mb-0">{{ _('Upload or replace certificate') }}</h6>
        </div>
        <div class="card-body">
          <form method="post" enctype="multipart/form-data" class="row g-3">
            <div class="col-12">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Certificate type') }}</label>
              <select class="form-select" name="artifact" required>
                <option value="">{{ _('Please choose') }}</option>
                <option value="client_cert">{{ _('Client certificate') }}</option>
                <option value="client_key">{{ _('Private key') }}</option>
                <option value="ca_bundle">{{ _('CA bundle') }}</option>
              </select>
            </div>
            <div class="col-12">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('File') }}</label>
              <input type="file" class="form-control" name="file" accept=".pem,.crt,.cer,.der,.key" required>
              <div class="form-text">{{ _('max. 2 MB; PEM, CRT, CER or DER. Keys accept PEM/KEY.') }}</div>
            </div>
            <div class="col-12 d-flex justify-content-end">
              <button type="submit" class="btn btn-primary">{{ _('Upload') }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}