{% extends "pages/base.html" %}
{% load i18n %}

{% block title %}{{ charger.display_name|default:charger.name|default:charger.charger_id }} - {% trans "Search Sessions" %}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h1 class="mb-0">{{ charger.display_name|default:charger.name|default:charger.charger_id }}</h1>
  <a class="btn btn-secondary" href="{{ status_url }}">{% trans "Back to status" %}</a>
</div>
{% if connector_links %}
<nav class="nav nav-pills mb-3">
  {% for item in connector_links %}
  <a class="nav-link{% if item.active %} active{% endif %}" href="{{ item.url }}">{{ item.label }}</a>
  {% endfor %}
</nav>
{% endif %}
{% if date_toggle_links %}
<div class="d-flex flex-column flex-md-row gap-2 justify-content-between align-items-md-center mb-3">
  <span class="text-muted small text-uppercase fw-semibold">{% trans "Date display" %}</span>
  <div class="btn-group" role="group" aria-label="{% trans 'Date display' %}">
    {% for link in date_toggle_links %}
    <a class="btn btn-outline-secondary{% if link.active %} active{% endif %}" href="{{ link.url }}">{{ link.label }}</a>
    {% endfor %}
  </div>
</div>
{% endif %}
<form method="get" class="mb-3">
  <label class="form-label" for="date">{% trans "Select date" %}</label>
  <div class="d-flex gap-2">
    <input type="date" id="date" name="date" class="form-control" value="{{ date|default:'' }}">
    <input type="hidden" name="dates" value="{{ date_view }}">
    <button type="submit" class="btn btn-primary">{% trans "Search" %}</button>
  </div>
</form>
{% if transactions is not None %}
  {% if transactions %}
  <div class="table-responsive">
    <table class="table align-middle">
      <thead>
        <tr>
          <th scope="col">{% trans "ID" %}</th>
          {% if charger.connector_id is None %}
          <th scope="col">{% trans "Connector" %}</th>
          {% endif %}
          <th scope="col">{% trans "Start" %}<span class="d-block small text-muted">{% if date_view == "received" %}{% trans "Received time" %}{% else %}{% trans "Charger time" %}{% endif %}</span></th>
          <th scope="col">{% trans "Stop" %}<span class="d-block small text-muted">{% if date_view == "received" %}{% trans "Received time" %}{% else %}{% trans "Charger time" %}{% endif %}</span></th>
          <th scope="col">{% trans "Energy (kW)" %}</th>
          <th scope="col">{% trans "RFID Label" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for tx in transactions %}
        <tr>
          <td>{{ tx.id }}</td>
          {% if charger.connector_id is None %}
          <td>{{ tx.charger.connector_label }}</td>
          {% endif %}
          {% if date_view == "received" %}
          <td>{{ tx.received_start_time|default:tx.start_time }}</td>
          <td>{{ tx.received_stop_time|default:tx.stop_time|default:"-" }}</td>
          {% else %}
          <td>{{ tx.start_time }}</td>
          <td>{{ tx.stop_time|default:"-" }}</td>
          {% endif %}
          <td>{{ tx.kw|floatformat:2 }}</td>
          <td>
            {% if tx.rfid_label %}
            {{ tx.rfid_label }}
            {% else %}
            <span class="text-muted">-</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p class="text-muted">{% trans "No sessions found." %}</p>
  {% endif %}
{% endif %}
{% endblock %}