{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <style>
    .op-credentials-card {
      border: 1px solid var(--pipelet-card-border, rgba(148, 163, 184, 0.35));
      border-radius: 16px;
      padding: 1.25rem 1.5rem;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.95);
      margin-bottom: 1.75rem;
    }

    .docs.dark-edition .op-credentials-card {
      background: rgba(15, 23, 42, 0.92);
      border-color: rgba(148, 163, 184, 0.3);
      box-shadow: 0 16px 36px rgba(2, 6, 23, 0.6);
    }

    .op-credentials-card h2 {
      margin-top: 0;
      margin-bottom: 0.75rem;
      font-size: 1.25rem;
    }

    .op-credentials-grid {
      display: grid;
      gap: 0.5rem 1.25rem;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .op-credentials-grid.single-column {
      grid-template-columns: 1fr;
    }

    .op-credentials-item {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .op-credentials-label {
      font-weight: 600;
      color: rgba(15, 23, 42, 0.8);
    }

    .docs.dark-edition .op-credentials-label {
      color: rgba(226, 232, 240, 0.9);
    }

    .op-credentials-value {
      word-break: break-all;
    }
  </style>
  <div style="width:100%; margin-bottom:50px">
    <h1 class="ct-docs-page-h1-title" id="content">
                Connection Settings
    </h1>
  </div>

  <div class="op-credentials-card">
    <h2>OCPP Broker credentials</h2>
    <div class="op-credentials-grid single-column">
      <div class="op-credentials-item">
        <span class="op-credentials-label">Dashboard url</span>
        <span class="op-credentials-value">https://broker.depotcharge.com/op_dashboard</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">API base url</span>
        <span class="op-credentials-value">https://broker.depotcharge.com</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">API token</span>
        <span class="op-credentials-value">1844f4475d954543b1edff16ab6b4514</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">Websocket base url</span>
        <span class="op-credentials-value">ws://ocpp.depotcharge.com:80</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">Websocket secured base url</span>
        <span class="op-credentials-value">wss://ocpp.depotcharge.com:443</span>
      </div>
    </div>
  </div>

  <div class="op-credentials-card">
    <h2>OCPP connection details</h2>
    <div class="op-credentials-grid single-column">
      <div class="op-credentials-item">
        <span class="op-credentials-label">OCPP Central System Address</span>
        <span class="op-credentials-value">{{ ocpp_proxy_endpoint }}</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">OCPP Sample URL</span>
        <span class="op-credentials-value">{{ ocpp_url }}</span>
      </div>
    </div>
  </div>

  <div class="op-credentials-card">
    <h2>MQTT details</h2>
    <div class="op-credentials-grid single-column">
      <div class="op-credentials-item">
        <span class="op-credentials-label">MQTT Broker</span>
        <span class="op-credentials-value">{{ mqtt_broker }}:{{ mqtt_port }}</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">MQTT User</span>
        <span class="op-credentials-value">{{ mqtt_user }}</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">MQTT Password</span>
        <span class="op-credentials-value">{{ mqtt_password }}</span>
      </div>
      <div class="op-credentials-item">
        <span class="op-credentials-label">MQTT Sample request</span>
        <span class="op-credentials-value">mosquitto_sub -h {{ mqtt_broker }} -u {{ mqtt_user }} -P {{ mqtt_password }} -t {{ mqtt_topic_prefix }}#</span>
      </div>
    </div>
  </div>




</main>
{% endblock %}