{% 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 – OCPP commands') }}</h1>
  <p class="text-muted">{{ _('Send RemoteStart/Stop, resets, or diagnostic requests to connected stations with Plug & Charge metadata.') }}</p>

  {% if fetch_error %}
  <div class="alert alert-warning" role="alert">{{ _('Connected stations list could not be loaded: {error}') | replace('{error}', fetch_error) }}</div>
  {% endif %}
  {% 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="row">
    <div class="col-lg-7">
      <div class="card mb-4">
        <div class="card-header pb-0">
          <h6 class="mb-1">{{ _('Compose command') }}</h6>
          <p class="text-sm text-muted mb-0">{{ _('Validates the connection before sending and records the action with PnC metadata.') }}</p>
        </div>
        <div class="card-body">
          <form method="post" class="row g-3">
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Station') }}</label>
              <select class="form-select" name="station_id" required>
                <option value="">{{ _('Please choose') }}</option>
                {% for station in stations %}
                <option value="{{ station.station_id }}" {% if station.station_id == selected_station %}selected{% endif %}>
                  {{ station.station_id }} ({{ station.availability_display }})
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Action') }}</label>
              <select class="form-select" name="action" required>
                <option value="">{{ _('Please choose') }}</option>
                <option value="remote_start" {% if selected_action == 'remote_start' %}selected{% endif %}>RemoteStartTransaction</option>
                <option value="remote_stop" {% if selected_action == 'remote_stop' %}selected{% endif %}>RemoteStopTransaction</option>
                <option value="diagnostics" {% if selected_action == 'diagnostics' %}selected{% endif %}>GetDiagnostics</option>
                <option value="reset" {% if selected_action == 'reset' %}selected{% endif %}>Reset</option>
                <option value="trigger_boot" {% if selected_action == 'trigger_boot' %}selected{% endif %}>Trigger BootNotification</option>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Connector ID') }}</label>
              <input type="number" class="form-control" name="connector_id" min="0" step="1" list="connectorOptions" placeholder="{{ _('e.g. 1') }}">
              <datalist id="connectorOptions">
                {% for station in stations %}
                  {% for connector in station.connectors %}
                  <option value="{{ connector.connector_id }}">{{ station.station_id }} – {{ connector.connector_id }} ({{ connector.status }})</option>
                  {% endfor %}
                {% endfor %}
              </datalist>
            </div>
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Transaction ID') }}</label>
              <input type="number" class="form-control" name="transaction_id" min="0" step="1" placeholder="{{ _('Optional for RemoteStop') }}">
            </div>

            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('IdTag') }}</label>
              <input type="text" class="form-control" name="id_tag" placeholder="{{ _('overrides contract reference') }}">
            </div>
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Reset type') }}</label>
              <select class="form-select" name="reset_type">
                <option value="">{{ _('Default (Hard)') }}</option>
                <option value="Hard">Hard</option>
                <option value="Soft">Soft</option>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Diagnostics URL') }}</label>
              <input type="text" class="form-control" name="diagnostics_location" placeholder="{{ _('Optional, otherwise default') }}">
            </div>
            <div class="col-md-3">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Retries') }}</label>
              <input type="number" class="form-control" name="retries" min="1" step="1" placeholder="1">
            </div>
            <div class="col-md-3">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Retry interval (s)') }}</label>
              <input type="number" class="form-control" name="retry_interval" min="1" step="1" placeholder="60">
            </div>

            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Contract-cert reference') }}</label>
              <input type="text" class="form-control" name="contract_cert_reference" placeholder="{{ _('PnC contract certificate') }}">
            </div>
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Hubject session/partner ID') }}</label>
              <input type="text" class="form-control" name="session_id" placeholder="SessionID">
              <div class="form-text">{{ _('Optional correlation value (e.g. SessionID or EMP/CPO PartnerSessionID).') }}</div>
              <input type="text" class="form-control mt-2" name="partner_session_id" placeholder="PartnerSessionID">
            </div>

            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Initiator') }}</label>
              <input type="text" class="form-control" name="initiated_by" placeholder="{{ _('who is sending the command') }}">
            </div>
            <div class="col-md-6">
              <label class="form-label text-uppercase text-xxs text-secondary">{{ _('Notes') }}</label>
              <input type="text" class="form-control" name="notes" placeholder="{{ _('Audit note') }}">
            </div>

            <div class="col-12 d-flex justify-content-end">
              <button type="submit" class="btn btn-primary">{{ _('Send command') }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card mb-4">
        <div class="card-header pb-0">
          <h6 class="mb-1">{{ _('Connected stations') }}</h6>
          <p class="text-sm text-muted mb-0">{{ _('Check the connection before triggering a PnC command.') }}</p>
        </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">{{ _('Station') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Since') }}</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Connectors') }}</th>
                </tr>
              </thead>
              <tbody>
                {% for station in stations %}
                <tr>
                  <td class="align-middle text-sm fw-bold">{{ station.station_id }}</td>
                  <td class="align-middle text-sm">
                    <div>{{ station.connected_since_display or '–' }}</div>
                    <span class="badge {{ station.availability_badge_class }} mt-1">{{ station.availability_display }}</span>
                  </td>
                  <td class="align-middle text-sm">
                    {% if station.connectors %}
                    <ul class="mb-0">
                      {% for connector in station.connectors %}
                      <li class="text-xs">{{ connector.connector_id }} – {{ connector.status }}{% if connector.transaction_id %} (TX {{ connector.transaction_id }}){% endif %}{% if connector.start_method %} [{{ connector.start_method }}]{% endif %}</li>
                      {% endfor %}
                    </ul>
                    {% else %}
                    <span class="text-secondary text-xs">{{ _('No details') }}</span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header pb-0">
          <h6 class="mb-1">{{ _('Response / audit') }}</h6>
          <p class="text-sm text-muted mb-0">{{ _('Shows the structured results of the last action.') }}</p>
        </div>
        <div class="card-body">
          {% if response_payload %}
          <pre class="bg-light p-3 rounded border border-1">{{ response_payload | tojson(indent=2) }}</pre>
          {% else %}
          <p class="text-sm text-secondary mb-0">{{ _('No action executed yet.') }}</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}