{% 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 – Charging Sessions</h1>
  <p class="text-muted">Die neuesten 75 Ladevorgänge sowie Suchfunktionen über die gesamte Historie.</p>

  <div class="card mb-4">
    <div class="card-body">
      <form class="row g-3" method="get">
        <div class="col-md-4">
          <label class="form-label text-xs text-uppercase text-secondary">Station ID</label>
          <input type="text" class="form-control" name="station_id" value="{{ station_query }}" placeholder="z.B. LE00628B">
        </div>
        <div class="col-md-4">
          <label class="form-label text-xs text-uppercase text-secondary">ID Tag</label>
          <input type="text" class="form-control" name="id_tag" value="{{ id_tag_query }}" placeholder="Nutzer-ID">
        </div>
        <div class="col-md-4">
          <label class="form-label text-xs text-uppercase text-secondary">Session Start (Datum)</label>
          <input type="date" class="form-control" name="session_date" value="{{ session_date_query }}">
        </div>
        <div class="col-12 d-flex justify-content-end">
          <a href="{{ url_for('mini_cpms_charging_sessions') }}" class="btn btn-outline-secondary me-2">Zurücksetzen</a>
          <button type="submit" class="btn btn-primary">Suchen</button>
        </div>
      </form>
      <p class="text-xs text-muted mb-0 mt-3">
        {% if limit_applied %}
          Es werden standardmäßig die letzten 75 Einträge angezeigt.
        {% else %}
          Anzeige aller passenden Einträge ohne Limitierung.
        {% endif %}
      </p>
    </div>
  </div>

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

  <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">Station</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID Tag</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">Ende</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Energie [kWh]</th>
            </tr>
          </thead>
          <tbody>
            {% if sessions %}
              {% for session in sessions %}
              <tr>
                <td class="text-sm">
                  {% if session.station_id %}
                  <a href="/op_details?source_url={{ session.station_id }}" class="text-primary font-weight-bold">{{ session.station_id }}</a>
                  {% else %}-{% endif %}
                </td>
                <td class="text-sm">{{ session.id_tag or '-' }}</td>
                <td class="text-sm">{{ session.session_start or '-' }}</td>
                <td class="text-sm">{{ session.session_end or '-' }}</td>
                <td class="text-sm">{{ session.energy_kwh if session.energy_kwh is not none else '-' }}</td>
              </tr>
              {% endfor %}
            {% else %}
            <tr>
              <td colspan="5" class="text-center text-muted py-4">Keine Einträge gefunden.</td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>
{% endblock %}