{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">{{ _('Broker Instances') }}</h1>
  <p class="text-sm text-muted">{{ _('Manage reachable broker endpoints and choose which one is used for the dashboard view.') }}</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-1">{{ _('Default selection') }}</h6>
      <p class="text-xs text-muted mb-0">{{ _('If no default is chosen, the value from config.json remains active.') }}</p>
    </div>
    <div class="card-body">
      <form method="post" class="row g-3 align-items-end">
        <div class="col-md-8">
          <label for="defaultBroker" class="form-label text-xs text-uppercase text-secondary font-weight-bolder opacity-7">{{ _('Broker to display') }}</label>
          <select id="defaultBroker" name="base_url" class="form-select">
            {% for instance in broker_instances %}
            <option value="{{ instance.base_url }}" data-ocpp-port="{{ instance.ocpp_port }}" data-api-port="{{ instance.api_port }}" {% if instance.is_default %}selected{% endif %}>{{ instance.name }} – {{ instance.base_url }} (OCPP: {{ instance.ocpp_port }}, API: {{ instance.api_port }})</option>
            {% endfor %}
          </select>
          <input type="hidden" name="ocpp_port" id="defaultOcppPort" value="{{ default_broker_settings.ocpp_port }}">
          <input type="hidden" name="api_port" id="defaultApiPort" value="{{ default_broker_settings.api_port }}">
        </div>
        <div class="col-md-4 d-flex gap-2">
          <button class="btn btn-primary mt-3" type="submit" name="action" value="set_default">{{ _('Set as default') }}</button>
          <a class="btn btn-outline-secondary mt-3" href="{{ dashboard_url }}?proxy_base_url={{ default_broker_settings.base_url|urlencode }}&proxy_ocpp_port={{ default_broker_settings.ocpp_port }}&proxy_api_port={{ default_broker_settings.api_port }}">{{ _('Open dashboard') }}</a>
        </div>
      </form>
      <div class="text-xs text-muted mt-2">{{ _('Current default:') }} <strong>{{ default_broker_settings.base_url }} (OCPP: {{ default_broker_settings.ocpp_port }}, API: {{ default_broker_settings.api_port }})</strong></div>
    </div>
  </div>

  <div class="card">
    <div class="card-header pb-0">
      <h6 class="mb-0">{{ _('Broker endpoints') }}</h6>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <div class="table-responsive p-0">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Name') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Base URL') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('OCPP Port') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('API Port') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Default') }}</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">{{ _('Actions') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for instance in broker_instances %}
            <tr>
              <form method="post">
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="text" name="name" value="{{ instance.name }}" {% if not instance.editable %}readonly{% endif %}>
                </td>
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="text" name="base_url" value="{{ instance.base_url }}" placeholder="http(s)://host" {% if not instance.editable %}readonly{% endif %}>
                </td>
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="number" name="ocpp_port" min="1" max="65535" value="{{ instance.ocpp_port }}" {% if not instance.editable %}readonly{% endif %}>
                </td>
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="number" name="api_port" min="1" max="65535" value="{{ instance.api_port }}" {% if not instance.editable %}readonly{% endif %}>
                </td>
                <td class="text-sm">
                  <div class="d-flex align-items-center gap-2">
                    {% if instance.is_default %}
                    <span class="badge bg-gradient-success">{{ _('Default') }}</span>
                    {% endif %}
                    {% if instance.source == 'config' %}
                    <span class="badge bg-gradient-secondary">config.json</span>
                    {% endif %}
                  </div>
                </td>
                <td class="text-sm text-end">
                  <input type="hidden" name="id" value="{{ instance.id }}">
                  <button class="btn btn-outline-primary btn-sm" type="submit" name="action" value="set_default">{{ _('Set as default') }}</button>
                  {% if instance.editable %}
                  <button class="btn btn-outline-secondary btn-sm" type="submit" name="action" value="update">{{ _('Save') }}</button>
                  <button class="btn btn-outline-danger btn-sm" type="submit" name="action" value="delete">{{ _('Delete') }}</button>
                  {% endif %}
                </td>
              </form>
            </tr>
            {% endfor %}
            <tr>
              <form method="post">
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="text" name="name" placeholder="{{ _('Display name') }}">
                </td>
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="text" name="base_url" placeholder="http(s)://host">
                </td>
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="number" name="ocpp_port" min="1" max="65535" value="80">
                </td>
                <td class="text-sm">
                  <input class="form-control form-control-sm" type="number" name="api_port" min="1" max="65535" value="9900">
                </td>
                <td class="text-sm"></td>
                <td class="text-sm text-end">
                  <button class="btn btn-primary btn-sm" type="submit" name="action" value="add">{{ _('Add') }}</button>
                </td>
              </form>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>
<script>
  (function() {
    const select = document.getElementById('defaultBroker');
    const ocppInput = document.getElementById('defaultOcppPort');
    const apiInput = document.getElementById('defaultApiPort');
    if (!select || !ocppInput || !apiInput) {
      return;
    }
    const syncPorts = () => {
      const option = select.options[select.selectedIndex];
      if (!option) {
        return;
      }
      ocppInput.value = option.dataset.ocppPort || '';
      apiInput.value = option.dataset.apiPort || '';
    };
    select.addEventListener('change', syncPorts);
    syncPorts();
  })();
</script>
{% endblock %}