{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="container-fluid px-0">
    <div class="mb-4">
      <h1 class="ct-docs-page-h1-title" id="content">{{ _('MQTT Overview') }}</h1>
      <p class="text-muted mb-0">{{ _('Overview of the MQTT configuration and enabled forwards.') }}</p>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2 class="h5 mb-3">{{ _('Status') }}</h2>
        <p class="mb-3">
          {% if configured %}
            <span class="badge bg-success">{{ _('MQTT is configured') }}</span>
          {% else %}
            <span class="badge bg-secondary">{{ _('MQTT is not configured') }}</span>
          {% endif %}
        </p>
        {% if reachability is not none %}
          {% if reachability %}
            <div class="alert alert-success mb-0" role="alert">
              {{ _('The MQTT server {host}:{port} is reachable.', host=mqtt_config.broker, port=mqtt_config.port) }}
            </div>
          {% else %}
            <div class="alert alert-danger mb-0" role="alert">
              {{ _('The MQTT server {host}:{port} is not reachable.', host=mqtt_config.broker, port=mqtt_config.port) }}<br>
              <span class="small text-break">{{ reachability_error }}</span>
            </div>
          {% endif %}
        {% elif reachability_error %}
          <div class="alert alert-warning mb-0" role="alert">
            {{ reachability_error }}
          </div>
        {% endif %}
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2 class="h5 mb-3">{{ _('Configuration') }}</h2>
        <dl class="row mb-0">
          <dt class="col-sm-4 col-lg-3">{{ _('MQTT Broker') }}</dt>
          <dd class="col-sm-8 col-lg-9 text-break">{{ mqtt_config.broker or '–' }}</dd>
          <dt class="col-sm-4 col-lg-3">{{ _('Port') }}</dt>
          <dd class="col-sm-8 col-lg-9">{{ mqtt_config.port or '–' }}</dd>
          <dt class="col-sm-4 col-lg-3">{{ _('Username') }}</dt>
          <dd class="col-sm-8 col-lg-9 text-break">{{ mqtt_config.user or '–' }}</dd>
          <dt class="col-sm-4 col-lg-3">{{ _('Password') }}</dt>
          <dd class="col-sm-8 col-lg-9 text-break">{{ mqtt_config.password or '–' }}</dd>
          <dt class="col-sm-4 col-lg-3">{{ _('Topic prefix') }}</dt>
          <dd class="col-sm-8 col-lg-9 text-break">{{ mqtt_config.topic_prefix or '–' }}</dd>
        </dl>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2 class="h5 mb-3">{{ _('Example: View all messages with {command}', command='<code>mosquitto_sub</code>') }}</h2>
        <p class="mb-3">{{ _('Run the following command on a machine with mosquitto-clients installed to view all messages on the configured topic.') }}</p>
        <pre class="bg-light rounded p-3 mb-0"><code>{{ mosquitto_example }}</code></pre>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2 class="h5 mb-3">{{ _('Wallboxes with MQTT forwarding') }}</h2>
        {% if wallbox_error %}
          <div class="alert alert-danger" role="alert">
            {{ _('Error loading wallboxes: {error}', error=wallbox_error) }}
          </div>
        {% endif %}
        {% if wallboxes %}
          <div class="table-responsive">
            <table class="table table-striped align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col">{{ _('Wallbox') }}</th>
                  <th scope="col">{{ _('Source URL') }}</th>
                  <th scope="col">{{ _('Backend target') }}</th>
                  <th scope="col">{{ _('Activity') }}</th>
                </tr>
              </thead>
              <tbody>
                {% for wallbox in wallboxes %}
                  <tr>
                    <td class="text-break">{{ wallbox.station_id or '–' }}</td>
                    <td class="text-break">{{ wallbox.source_url or '–' }}</td>
                    <td class="text-break">{{ wallbox.ws_url or '–' }}</td>
                    <td class="text-break">{{ wallbox.activity or '–' }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <p class="text-muted mb-0">{{ _('No wallboxes with MQTT forwarding found.') }}</p>
        {% endif %}
      </div>
    </div>

    <div class="mt-4">
      <a href="/op_systemConfig" class="btn btn-primary">{{ _('Change configuration') }}</a>
    </div>
  </div>
</main>
{% endblock %}