{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
    <h1 class="ct-docs-page-h1-title" id="content">Active Sessions</h1>
    <span class="badge bg-gradient-primary text-uppercase">{{ sessions|length }} active</span>
  </div>

  <p class="text-xs text-secondary">Data source: {{ endpoint }}</p>

  {% if error_message %}
  <div class="alert alert-warning" role="alert">
    {{ error_message }}
  </div>
  {% endif %}

  {% if sessions %}
  <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">Connector</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Transaction</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">RFID</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Start</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Duration</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Meter Start</th>
        </tr>
      </thead>
      <tbody>
        {% for session in sessions %}
        <tr>
          <td class="text-xs font-weight-bold">{{ session.station_id or '-' }}</td>
          <td class="text-xs">{{ session.connector_id or '-' }}</td>
          <td class="text-xs">{{ session.transaction_id or '-' }}</td>
          <td class="text-xs">{{ session.id_token or '-' }}</td>
          <td class="text-xs" title="{{ session.start_raw or '' }}">{{ session.start_display or '-' }}</td>
          <td class="text-xs text-end">
            {% if session.duration %}
              {{ session.duration }}
              {% if session.duration_seconds is not none %}
              <div class="text-xxs text-secondary">{{ session.duration_seconds }} s</div>
              {% endif %}
            {% else %}-{% endif %}
          </td>
          <td class="text-xs text-end">
            {% if session.meter_start_kwh is not none %}
              {{ '%.3f'|format(session.meter_start_kwh) }}&nbsp;kWh
            {% elif session.meter_start_wh is not none %}
              {{ session.meter_start_wh }}&nbsp;Wh
            {% else %}-{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p>There are currently no active sessions.</p>
  {% endif %}
</main>
{% endblock %}