{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">{{ _('Plug & Charge – Stations') }}</h1>
  <p class="text-muted">{{ _('Enable or disable Plug & Charge per charging station.') }}</p>

  {% if error %}
  <div class="alert alert-danger" role="alert">{{ error }}</div>
  {% endif %}
  {% if message %}
  <div class="alert alert-success" role="alert">{{ message }}</div>
  {% endif %}

  <div class="card">
    <div class="card-header pb-0 d-flex justify-content-between align-items-center flex-wrap gap-3">
      <div>
        <h6 class="mb-0">{{ _('Station overview') }}</h6>
        <p class="text-sm text-muted mb-0">{{ _('Toggle PnC with one click and jump to OCPP actions.') }}</p>
      </div>
      <form class="ms-auto" method="get">
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" name="chargepoint_id" placeholder="{{ _('Search Chargepoint ID') }}" value="{{ chargepoint_query or '' }}">
          <button class="btn btn-outline-primary" type="submit">{{ _('Search') }}</button>
        </div>
      </form>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <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">{{ _('Chargepoint ID') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Activity') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('PnC') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Actions') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for station in stations %}
            <tr>
              <td class="align-middle text-sm">
                <div class="fw-bold">{{ station.station_id }}</div>
                <div class="text-xs text-secondary">{{ station.source_url }}</div>
                {% if station.location_name %}
                <div class="text-xs text-secondary">{{ station.location_name }}</div>
                {% endif %}
              </td>
              <td class="align-middle text-sm">{{ station.activity or '—' }}</td>
              <td class="align-middle text-sm">
                <form method="post" class="d-inline">
                  <input type="hidden" name="station_id" value="{{ station.station_id }}">
                  <input type="hidden" name="page" value="{{ current_page }}">
                  {% if chargepoint_query %}
                  <input type="hidden" name="chargepoint_id" value="{{ chargepoint_query }}">
                  {% endif %}
                  <input type="hidden" name="target_state" value="{{ 0 if station.pnc_enabled else 1 }}">
                  {% if station.pnc_enabled %}
                  <span class="badge bg-gradient-success">{{ _('Active') }}</span>
                  <button type="submit" class="btn btn-link text-danger text-xs ps-2">{{ _('Disable') }}</button>
                  {% else %}
                  <span class="badge bg-gradient-secondary">{{ _('Inactive') }}</span>
                  <button type="submit" class="btn btn-sm btn-outline-primary ms-2">{{ _('Enable') }}</button>
                  {% endif %}
                </form>
              </td>
              <td class="align-middle text-sm">
                <a class="btn btn-sm btn-outline-primary" href="{{ url_for('mini_cpms_commands', station_id=station.station_id) }}">{{ _('OCPP Commands') }}</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="d-flex justify-content-between align-items-center px-3 pt-3">
        <div class="text-sm text-muted">
          {{ _('Page %(page)s of %(total)s (Total: %(count)s)', page=current_page, total=total_pages, count=total_stations) }}
        </div>
        <nav aria-label="{{ _('Station pagination') }}">
          <ul class="pagination pagination-sm mb-0">
            <li class="page-item {% if current_page <= 1 %}disabled{% endif %}">
              <a class="page-link" href="{{ url_for('op_pnc_stations', page=current_page - 1, chargepoint_id=chargepoint_query) }}" tabindex="-1" aria-disabled="{{ current_page <= 1 }}">{{ _('Previous') }}</a>
            </li>
            {% for page_number in range(1, total_pages + 1) %}
            <li class="page-item {% if page_number == current_page %}active{% endif %}">
              <a class="page-link" href="{{ url_for('op_pnc_stations', page=page_number, chargepoint_id=chargepoint_query) }}">{{ page_number }}</a>
            </li>
            {% endfor %}
            <li class="page-item {% if current_page >= total_pages %}disabled{% endif %}">
              <a class="page-link" href="{{ url_for('op_pnc_stations', page=current_page + 1, chargepoint_id=chargepoint_query) }}" aria-disabled="{{ current_page >= total_pages }}">{{ _('Next') }}</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</main>
{% endblock %}