{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <style>
    .icon-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: var(--dashboard-icon-bg, #f1f3f5);
      border-radius: 8px;
      border: 1px solid var(--dashboard-card-border, transparent);
      padding: 0;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .icon-action:hover,
    .icon-action:focus {
      background: var(--dashboard-icon-hover-bg, #e9ecef);
      transform: translateY(-1px);
    }

    .icon-action svg {
      pointer-events: none;
    }

    .table-icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: #4ba2e3;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .table-icon-button svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    .table-icon-button:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }

    .table-icon-button:hover,
    .table-icon-button:focus {
      background: var(--dashboard-icon-hover-bg, #e9ecef);
    }

    .table-icon-button--danger {
      color: #ed7039;
    }
  </style>
  <h1 class="ct-docs-page-h1-title" id="content">{{ _('OCPP Routing – Configuration') }}</h1>
  <p class="text-muted">{{ _('Create digital twins of charge points that connect to additional OCPP backends. The twins behave like the original charger, emit the same signals, and process the responses.') }}</p>

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

  <div class="card mb-4">
    <div class="card-header pb-0">
      <h6 class="mb-0">{{ _('Manage routing rules') }}</h6>
    </div>
    <div class="card-body">
      {% if chargepoints %}
      <form method="post">
        <div class="mb-3">
          <label for="chargepoint-select" class="form-label">{{ _('Chargepoint') }}</label>
          <select class="form-select" id="chargepoint-select" name="chargepoint_id" required>
            <option value="" {% if not selected_chargepoint %}selected{% endif %}>{{ _('Please select a charge point.') }}</option>
            {% for cp in chargepoints %}
            <option value="{{ cp }}" {% if cp == selected_chargepoint %}selected{% endif %}>{{ cp }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label for="ocpp-backend-url" class="form-label">{{ _('OCPP backend URL') }} <span class="text-muted">({{ _('e.g. wss://ocpp.pipelet.com/CP1245') }})</span></label>
          <input type="text" class="form-control" id="ocpp-backend-url" name="ocpp_backend_url" value="{{ selected_backend_url }}" placeholder="{{ _('wss://...') }}">
        </div>
        <div class="mb-3">
          <label for="ocpp-protocol" class="form-label">{{ _('OCPP protocol') }}</label>
          <select class="form-select" id="ocpp-protocol" name="ocpp_protocol">
            <option value="" {% if not selected_protocol %}selected{% endif %}>{{ _('Please select a protocol') }}</option>
            <option value="OCPP 1.6" {% if selected_protocol == 'OCPP 1.6' %}selected{% endif %}>OCPP 1.6</option>
            <option value="OCPP 2.0.1" {% if selected_protocol == 'OCPP 2.0.1' %}selected{% endif %}>OCPP 2.0.1</option>
          </select>
        </div>
        <div class="row">
          {% for option in options %}
          <div class="col-md-4 col-lg-3">
            <div class="form-check mb-2">
              <input class="form-check-input" type="checkbox" value="1" id="{{ option.field_id }}" name="{{ option.field_id }}" {% if option.checked %}checked{% endif %}>
              <label class="form-check-label" for="{{ option.field_id }}">{{ option.label }}</label>
            </div>
          </div>
          {% endfor %}
        </div>
        <div class="d-flex gap-2 mt-3">
          <button type="submit" name="action" value="save" class="btn btn-primary">{{ _('Save') }}</button>
          <button type="submit" name="action" value="delete" class="btn btn-outline-danger" {% if not selected_chargepoint %}disabled{% endif %}>{{ _('Delete configuration') }}</button>
        </div>
      </form>
      {% else %}
      <p class="text-muted mb-0">{{ _('No charge points are known yet. Once data is collected, forwarding rules can be configured here.') }}</p>
      {% endif %}
    </div>
  </div>

  <div class="card">
    <div class="card-header pb-0">
      <h6 class="mb-0">{{ _('Active routing configurations') }}</h6>
    </div>
    <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">{{ _('Chargepoint') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('OCPP backend URL') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('OCPP protocol') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Active OCPP messages') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">{{ _('Actions') }}</th>
            </tr>
          </thead>
          <tbody>
            {% if configuration_entries %}
            {% for entry in configuration_entries %}
            <tr>
              <td class="text-sm font-weight-bold">{{ entry.chargepoint_id }}</td>
              <td class="text-sm">{{ entry.backend_url or '-' }}</td>
              <td class="text-sm">{{ entry.protocol or '-' }}</td>
              <td class="text-sm">
                {% if entry.all_enabled %}
                  <span class="badge bg-gradient-warning text-dark fw-semibold me-1 mb-1">{{ entry.all_label }}</span>
                {% elif entry.enabled_labels %}
                  {% for label in entry.enabled_labels %}
                  <span class="badge bg-gradient-primary me-1 mb-1">{{ label }}</span>
                  {% endfor %}
                {% else %}
                  <span class="text-muted">{{ _('No messages enabled') }}</span>
                {% endif %}
              </td>
              <td class="text-sm text-end">
                <div class="d-flex justify-content-end align-items-center gap-2">
                  <a
                    class="icon-action"
                    href="{{ url_for('op_ocpp_routing_configuration', chargepoint_id=entry.chargepoint_id) }}"
                    title="{{ _('Edit configuration') }}"
                    aria-label="{{ _('Edit configuration') }}"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22" fill="#4ba2e3" aria-hidden="true"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
                  </a>
                  <form method="post" class="d-inline">
                    <input type="hidden" name="chargepoint_id" value="{{ entry.chargepoint_id }}">
                    <input type="hidden" name="action" value="delete">
                    <button
                      type="submit"
                      class="table-icon-button table-icon-button--danger p-0 m-0"
                      title="{{ _('Delete configuration') }}"
                      aria-label="{{ _('Delete configuration') }}"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" aria-hidden="true"><path d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
              <td colspan="5" class="text-center text-muted py-4">{{ _('No routing rules have been saved yet.') }}</td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>
{% endblock %}