{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
    <div>
      <h2 class="ct-docs-page-h1-title" id="content">
        {{ _('Credentials / Handshake') }}
      </h2>
      <p class="text-muted mb-0">{{ _('Monitor OCPI handshake attempts, tokens, and mTLS readiness per backend.') }}</p>
    </div>
    <form method="post" class="ocpi-action-group align-items-end">
      <div>
        <label class="form-label" for="handshake-backend">{{ _('Backend') }}</label>
        <select class="form-select ocpi-form-control" id="handshake-backend" name="backend_id">
          {% for backend in backends %}
          <option value="{{ backend.backend_id }}">{{ backend.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="pb-1">
        <button class="btn ocpi-btn ocpi-btn-primary ocpi-btn-sm" type="submit">{{ _('Re-run handshake') }}</button>
      </div>
    </form>
  </div>

  {% if message %}
  <div class="alert alert-info" role="alert">{{ message }}</div>
  {% endif %}
  {% if errors %}
    {% for err in errors %}
      <div class="alert alert-danger" role="alert">{{ err }}</div>
    {% endfor %}
  {% endif %}

  <div class="row g-3 mb-4">
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-uppercase text-secondary text-xs mb-2">{{ _('Open handshakes') }}</p>
          <h5 class="mb-0">{{ open_handshakes|length }}</h5>
          <p class="text-muted mb-0">{{ _('Pending or failed exchanges that may need attention.') }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-uppercase text-secondary text-xs mb-2">{{ _('Closed handshakes') }}</p>
          <h5 class="mb-0">{{ closed_handshakes|length }}</h5>
          <p class="text-muted mb-0">{{ _('Successful or recently completed exchanges.') }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <h5 class="card-title">{{ _('Handshake log') }}</h5>
      <div class="table-responsive">
        <table class="table table-striped align-items-center mb-0">
          <thead>
            <tr>
              <th>{{ _('Backend') }}</th>
              <th>{{ _('State') }}</th>
              <th>{{ _('Status') }}</th>
              <th>{{ _('Last update') }}</th>
              <th>{{ _('Tokens / mTLS') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for row in handshakes %}
            <tr>
              <td class="text-sm">{{ row.name }}</td>
              <td class="text-sm">
                {% if row.state == 'closed' %}
                  <span class="badge bg-success">{{ _('Closed') }}</span>
                {% else %}
                  <span class="badge bg-warning text-dark">{{ _('Open') }}</span>
                {% endif %}
              </td>
              <td class="text-sm">
                <div class="fw-bold">{{ row.status }}</div>
                <div class="text-muted small">{{ row.detail or _('No details') }}</div>
              </td>
              <td class="text-sm">{{ row.updated_at or row.created_at }}</td>
              <td class="text-sm">
                <div class="d-flex flex-wrap gap-2">
                  <span class="badge {% if row.backend_token_present %}bg-primary{% else %}bg-secondary{% endif %}">{{ _('Token') }}</span>
                  <span class="badge {% if row.peer_token_present %}bg-primary{% else %}bg-secondary{% endif %}">{{ _('Peer token') }}</span>
                  <span class="badge {% if row.credentials_token_present %}bg-primary{% else %}bg-secondary{% endif %}">{{ _('Credentials token') }}</span>
                  <span class="badge {% if row.mtls_ready %}bg-success{% else %}bg-danger{% endif %}">{{ _('mTLS ready') }}</span>
                </div>
                <div class="text-muted small mt-1">
                  {% if row.backend_token_hint %}{{ _('Bootstrap token ending in') }} {{ row.backend_token_hint }}{% else %}{{ _('Bootstrap token missing') }}{% endif %}<br>
                  {% if row.peer_token_hint %}{{ _('Peer token ending in') }} {{ row.peer_token_hint }}{% else %}{{ _('Peer token missing') }}{% endif %}
                </div>
              </td>
            </tr>
            {% else %}
            <tr>
              <td colspan="5" class="text-center text-muted">{{ _('No handshakes recorded yet.') }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>
{% endblock %}