{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
    <div>
      <h2 class="ct-docs-page-h1-title mb-1">{{ _('Charging Points') }}</h2>
      <p class="text-muted mb-0">{{ _('Filter EVSEs by status, capabilities, or tariffs and check their synchronization status with connected EMSPs.') }}</p>
    </div>
    <div class="d-flex flex-wrap align-items-center gap-2">
      <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('api_list_evses') }}" target="_blank">{{ _('Bulk edit (JSON)') }}</a>
      <div class="input-group input-group-sm" style="max-width: 320px;">
        <input type="file" class="form-control" id="evses-upload-input" accept=".csv,.json">
        <button class="btn btn-primary" type="button" id="evses-upload-btn">{{ _('Upload CSV/JSON') }}</button>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-12 col-md-4">
          <label class="form-label" for="status-filter">{{ _('Status') }}</label>
          <select class="form-select" id="status-filter" name="status">
            <option value="">{{ _('All statuses') }}</option>
            {% for status in filters.statuses %}
            <option value="{{ status }}" {% if status in selected_filters.status %}selected{% endif %}>{{ status }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label" for="capability-filter">{{ _('Capabilities') }}</label>
          <select class="form-select" id="capability-filter" name="capability">
            <option value="">{{ _('All capabilities') }}</option>
            {% for capability in filters.capabilities %}
            <option value="{{ capability }}" {% if capability in selected_filters.capability %}selected{% endif %}>{{ capability }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label" for="tariff-filter">{{ _('Tariffs') }}</label>
          <select class="form-select" id="tariff-filter" name="tariff">
            <option value="">{{ _('All tariffs') }}</option>
            {% for tariff in filters.tariffs %}
            <option value="{{ tariff }}" {% if tariff in selected_filters.tariff %}selected{% endif %}>{{ tariff }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 d-flex flex-wrap gap-2">
          <button class="btn btn-primary btn-sm" type="submit">{{ _('Apply filters') }}</button>
          <a class="btn btn-secondary btn-sm" href="{{ url_for('charging_points_view') }}">{{ _('Reset') }}</a>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body table-responsive">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th>{{ _('Location') }}</th>
            <th>{{ _('EVSE') }}</th>
            <th>{{ _('Status') }}</th>
            <th>{{ _('Capabilities') }}</th>
            <th>{{ _('Tariffs') }}</th>
            <th>{{ _('Backends') }}</th>
            <th>{{ _('Synchronization') }}</th>
            <th>{{ _('Last updated') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for evse in evses %}
          <tr>
            <td>
              <div class="fw-bold">{{ evse.location_name }}</div>
              <div class="text-muted small">{{ evse.location_id }}</div>
            </td>
            <td class="fw-bold">{{ evse.evse_uid }}</td>
            <td>
              {% if evse.status %}
                <span class="badge bg-secondary">{{ evse.status }}</span>
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% if evse.capabilities %}
                {% for capability in evse.capabilities %}
                  <span class="badge bg-info text-dark me-1">{{ capability }}</span>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% if evse.tariffs %}
                {% for tariff in evse.tariffs %}
                  <span class="badge bg-light text-dark me-1">{{ tariff }}</span>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% if evse.backends %}
                {% for backend in evse.backends %}
                  <div class="small">{{ backend }}</div>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('n/a') }}</span>
              {% endif %}
            </td>
            <td>
              {% set sync_items = evse.sync_status or [] %}
              {% if sync_items %}
                <div class="d-flex flex-column gap-1">
                  {% for sync in sync_items %}
                    <span class="badge {% if sync.success %}bg-success{% else %}bg-warning text-dark{% endif %}">
                      {{ sync.backend_name or _('Backend') }}
                      {% if sync.status_code %} ({{ sync.status_code }}){% endif %}
                      {% if sync.created_at %}<small class="ms-1">{{ sync.created_at }}</small>{% endif %}
                    </span>
                    {% if sync.error_message and not sync.success %}
                      <div class="text-muted small">{{ sync.error_message }}</div>
                    {% endif %}
                  {% endfor %}
                </div>
              {% else %}
                <span class="text-muted">{{ _('No sync attempts yet') }}</span>
              {% endif %}
            </td>
            <td class="text-muted small">
              {{ evse.last_updated or _('n/a') }}
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="8" class="text-center text-muted py-3">{{ _('No data available yet.') }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</main>

<script>
(function() {
  const uploadBtn = document.getElementById('evses-upload-btn');
  const uploadInput = document.getElementById('evses-upload-input');
  function notify(message) {
    try { toastr.info(message); } catch (e) { alert(message); }
  }
  if (uploadBtn && uploadInput) {
    uploadBtn.addEventListener('click', function() {
      if (!uploadInput.files.length) {
        notify('{{ _("Select a CSV or JSON file") }}');
        return;
      }
      const file = uploadInput.files[0];
      const reader = new FileReader();
      reader.onload = function(evt) {
        const contentType = file.type || (file.name.endsWith('.csv') ? 'text/csv' : 'application/json');
        fetch('{{ import_url }}', {
          method: 'POST',
          headers: {'Content-Type': contentType},
          body: evt.target.result
        }).then(resp => resp.json())
          .then(data => {
            if (data.errors && data.errors.length) {
              notify('{{ _("Import finished with warnings") }}: ' + data.errors.join('; '));
            } else {
              notify('{{ _("Import completed") }}');
            }
            window.location.reload();
          })
          .catch(err => notify('{{ _("Upload failed") }}: ' + err));
      };
      reader.readAsText(file);
    });
  }
})();
</script>
{% endblock %}