{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h1 class="ct-docs-page-h1-title mb-0">Konfiguration vergleichen</h1>
    <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('dashboard') }}">Zurück zum Dashboard</a>
  </div>

  <style>
  .compare-table thead th {
      background-color: #f1f3f5;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
  }

  .compare-table tbody th {
      background-color: #fafbfc;
      width: 220px;
      font-weight: 600;
  }

  .compare-table td,
  .compare-table th {
      vertical-align: top;
      font-size: 0.85rem;
      padding: 0.75rem;
  }

  .compare-table td.compare-cell--diff {
      background-color: #e0f2ff;
  }

  .compare-selection-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
      background: #f1f3f5;
      font-size: 0.8rem;
      margin: 0 0.25rem 0.25rem 0;
  }
  </style>

  <div class="mb-3">
    {% for station_id in station_ids %}
      <span class="compare-selection-pill">{{ station_id }}</span>
    {% endfor %}
  </div>

  {% if trimmed_selection %}
  <div class="alert alert-info" role="alert">
    Es werden maximal {{ max_compare }} Wallboxen gleichzeitig verglichen.
  </div>
  {% endif %}

  {% if comparison_rows %}
  <div class="table-responsive">
    <table class="table table-sm table-bordered compare-table">
      <thead>
        <tr>
          <th scope="col">Key</th>
          {% for station_id in station_ids %}
            <th scope="col">{{ station_id }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in comparison_rows %}
        <tr>
          <th scope="row">{{ row.key }}</th>
          {% for cell in row.cells %}
            <td class="{% if cell.is_different %}compare-cell--diff{% endif %}">
              {% if cell.display is string and cell.display|length > 40 %}
                {{ cell.display[:40] ~ '....' }}
              {% else %}
                {{ cell.display }}
              {% endif %}
            </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="alert alert-warning" role="alert">
    Es konnten keine Konfigurationswerte geladen werden.
  </div>
  {% endif %}
</main>
{% endblock %}