{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">{{ _('External API Logs') }}</h1>
  <p class="text-sm text-muted mb-4">{{ _('External API Log description') }}</p>

  <div class="card shadow-sm border">
    <div class="card-header pb-0">
      <h6 class="mb-0 text-sm">{{ _('Latest entries') }}</h6>
    </div>
    <div class="card-body p-0">
      {% if entries %}
      <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">{{ _('Timestamp') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Wallbox') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Endpoint') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Response Code:') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Request JSON') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Response Message') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in entries %}
            <tr>
              <td class="text-xs font-weight-bold">{{ entry.created_at.strftime('%Y-%m-%d %H:%M:%S') if entry.created_at else '-' }}</td>
              <td class="text-xs font-weight-bold">{{ entry.chargepoint_id or '-' }}</td>
              <td class="text-xs">{{ entry.endpoint or '-' }}</td>
              <td class="text-xs">
                {% if entry.response_code is not none %}
                  <span class="badge bg-light text-dark">{{ entry.response_code }}</span>
                {% else %}
                  -
                {% endif %}
              </td>
              <td class="text-xs"><pre class="mb-0" style="white-space:pre-wrap; word-break:break-word;">{{ entry.request_payload }}</pre></td>
              <td class="text-xs"><pre class="mb-0" style="white-space:pre-wrap; word-break:break-word;">{{ entry.response_body or '-' }}</pre></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="p-4">
        <p class="text-sm mb-0">{{ _('No log entries found.') }}</p>
      </div>
      {% endif %}
    </div>
  </div>
</main>
{% endblock %}