{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-3">
    <div>
      <h2 class="ct-docs-page-h1-title" id="content">
        {{ _('OCPI backend assignments') }}
      </h2>
      <p class="text-muted mb-0">{{ _('Assign OCPI backends per station and control activation/priority for EMSP routing.') }}</p>
    </div>
    <div class="ocpi-toolbar">
      <span class="badge bg-gradient-primary text-dark">
        {{ _('Assignments') }}: {{ rows|length }}
      </span>
    </div>
  </div>

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

  <div class="card">
    <div class="card-body table-responsive">
      <table class="table table-striped align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Station ID') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Backend') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('Active') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Priority') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Actions') }}</th>
          </tr>
        </thead>
        <tbody>
          {% if rows %}
          {% for row in rows %}
          <tr>
            <form method="post" class="align-middle">
              <input type="hidden" name="action" value="update">
              <input type="hidden" name="station_id" value="{{ row.station_id }}">
              <input type="hidden" name="backend_id" value="{{ row.backend_id }}">
              <td class="align-middle">
                <div class="fw-semibold">{{ row.station_id }}</div>
                <div class="text-muted small">{{ _('Backend ID:') }} {{ row.backend_id }}</div>
              </td>
              <td class="align-middle">{{ row.name }}</td>
              <td class="align-middle text-center">
                <input class="form-check-input" type="checkbox" name="enabled" value="1" {% if row.enabled %}checked{% endif %}>
              </td>
              <td class="align-middle" style="max-width: 140px;">
                <input class="form-control form-control-sm" type="number" name="priority" value="{{ row.priority }}" min="0" max="10000">
              </td>
              <td class="align-middle">
                <div class="ocpi-action-group">
                  <button class="btn ocpi-btn ocpi-btn-primary ocpi-btn-sm" type="submit">{{ _('Save') }}</button>
                  <button class="btn ocpi-btn ocpi-btn-danger ocpi-btn-sm" name="action" value="delete" type="submit">{{ _('Delete') }}</button>
                </div>
              </td>
            </form>
          </tr>
          {% endfor %}
          {% else %}
          <tr>
            <td colspan="5" class="text-center text-muted">{{ _('No OCPI assignments recorded yet.') }}</td>
          </tr>
          {% endif %}
          <tr class="table-light">
            <form method="post">
              <input type="hidden" name="action" value="add">
              <td>
                <label class="form-label d-block mb-1" for="new-station-id">{{ _('Station ID') }}</label>
                <input id="new-station-id" class="form-control form-control-sm" type="text" name="station_id" placeholder="station-123" required>
              </td>
              <td>
                <label class="form-label d-block mb-1" for="new-backend-id">{{ _('Backend') }}</label>
                <select class="form-select form-select-sm" name="backend_id" id="new-backend-id" required>
                  <option value="">{{ _('Please choose') }}</option>
                  {% for backend in backends %}
                  <option value="{{ backend.backend_id }}">{{ backend.name }}</option>
                  {% endfor %}
                </select>
              </td>
              <td class="text-center align-middle">
                <div class="form-check d-inline-flex justify-content-center">
                  <input class="form-check-input" type="checkbox" name="enabled" value="1" checked>
                </div>
              </td>
              <td style="max-width: 140px;" class="align-middle">
                <label class="form-label d-block mb-1" for="new-priority">{{ _('Priority') }}</label>
                <input id="new-priority" class="form-control form-control-sm" type="number" name="priority" value="100" min="0" max="10000">
              </td>
              <td class="align-middle">
                <button class="btn ocpi-btn ocpi-btn-primary ocpi-btn-sm" type="submit">{{ _('Add assignment') }}</button>
              </td>
            </form>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>
{% endblock %}