{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">{{ _('Core CPMS – Chargepoint Status') }}</h1>
  <p class="text-muted">{{ _('Latest status updates for all charge points based on the most recent StatusNotifications.') }}</p>

  {% 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 %}

  <form method="post" class="mb-4">
    <input type="hidden" name="action" value="status_round_call">
    <button type="submit" class="btn btn-primary" onclick="return confirm('{{ _('Start status round call?') }}');">{{ _('Status Call') }}</button>
  </form>

  {% if response_payload %}
  <div class="card mb-4">
    <div class="card-header pb-0">
      <h6 class="mb-0">{{ _('Response from the OCPP server') }}</h6>
    </div>
    <div class="card-body">
      <pre class="bg-light p-3 rounded text-sm">{% if response_payload is mapping or response_payload is sequence %}{{ response_payload | tojson(indent=2) | safe }}{% else %}{{ response_payload }}{% endif %}</pre>
    </div>
  </div>
  {% endif %}

  {% if fetch_error %}
  <div class="alert alert-warning" role="alert">
    <strong>{{ _('Notice:') }}</strong> {{ _('Status data could not be loaded from the database. Details: {details}', details=fetch_error) }}
  </div>
  {% endif %}

  <style>
    .status-indicator {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      margin-right: 0.75rem;
    }
    .status-indicator-success {
      background-color: #2dce89;
    }
    .status-indicator-warning {
      background-color: #f5b759;
    }
    .status-indicator-danger {
      background-color: #f5365c;
    }
  </style>

  <div class="card">
    <div class="card-body p-0">
      <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">{{ _('Status') }}</th>
              <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">{{ _('Status message') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Error Code') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Info') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Vendor') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Reported') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Updated') }}</th>
            </tr>
          </thead>
          <tbody>
            {% if statuses %}
              {% for entry in statuses %}
              <tr>
                <td class="text-sm">
                  <span class="status-indicator status-indicator-{{ entry.indicator }}" aria-hidden="true"></span>
                  <span class="visually-hidden">{{ entry.indicator }}</span>
                </td>
                <td class="text-sm font-weight-bold">{{ entry.chargepoint_id or '-' }}</td>
                <td class="text-sm">{{ entry.connector_id }}</td>
                <td class="text-sm">{{ entry.status }}</td>
                <td class="text-sm">{{ entry.error_code }}</td>
                <td class="text-sm">{{ entry.info }}</td>
                <td class="text-sm">{{ entry.vendor_id }}</td>
                <td class="text-sm">{{ entry.status_timestamp or '-' }}</td>
                <td class="text-sm">{{ entry.updated_at or '-' }}</td>
              </tr>
              {% endfor %}
            {% else %}
            <tr>
              <td colspan="9" class="text-center text-muted py-4">{{ _('No status messages are available yet.') }}</td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>
{% endblock %}