{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main>
<h1>Energy MQTT Check</h1>
<p>
  <button onclick="showList('nok')" class="pipelet-btn">Nicht OK</button>
  <button onclick="showList('ok')" class="pipelet-btn">OK</button>
</p>

<div id="nok">
<table border="1" cellpadding="5">
  <tr>
    <th>Topic</th>
    <th>Message</th>
    <th>Frequency</th>
    <th>Status</th>
    <th>Timestamp</th>
  </tr>
  {% for r in rows_nok %}
  <tr>
    <td>{{ r.topic }}</td>
    <td>
      <details>
        <summary>
          {{ r.message[:80] }}{% if r.message|length > 80 %}...{% endif %}
        </summary>
        <pre style="white-space: pre-wrap;">{{ r.message }}</pre>
      </details>
    </td>
    <td>{{ r.frequenz }}</td>
    <td style="color: {{ r.color }}">{{ r.status }}</td>
    <td>{{ r.ts }}</td>
  </tr>
  {% endfor %}
</table>
</div>

<div id="ok" style="display:none;">
<table border="1" cellpadding="5">
  <tr>
    <th>Topic</th>
    <th>Message</th>
    <th>Frequency</th>
    <th>Status</th>
    <th>Timestamp</th>
  </tr>
  {% for r in rows_ok %}
  <tr>
    <td>{{ r.topic }}</td>
    <td>
      <details>
        <summary>
          {{ r.message[:80] }}{% if r.message|length > 80 %}...{% endif %}
        </summary>
        <pre style="white-space: pre-wrap;">{{ r.message }}</pre>
      </details>
    </td>
    <td>{{ r.frequenz }}</td>
    <td style="color: {{ r.color }}">{{ r.status }}</td>
    <td>{{ r.ts }}</td>
  </tr>
  {% endfor %}
</table>
</div>

<script>
function showList(which) {
  document.getElementById('nok').style.display = which === 'nok' ? 'block' : 'none';
  document.getElementById('ok').style.display = which === 'ok' ? 'block' : 'none';
}
</script>
</main>
{% endblock %}