{% if not request.headers.get("Hx-Request") %}
  {% extends "base.html" %}
{% endif %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" id="nav-breadcrumb" hx-swap-oob="true">
  <ul>
    <li>System</li>
    <li><a href="#" hx-target="#body-main" hx-get="{{ request.path }}">Status</a></li>
  </ul>
</nav>
{% endblock breadcrumb %}

{% block body %}

<h4>System Status - <a href="#" class="no-text-decoration"
    hx-on:click="!window.s?s=this.textContent:null;this.textContent='👍';setTimeout(()=>{this.textContent=s}, 1000)"
    hx-target="#system-status-cards"
    hx-select="#system-status-cards"
    hx-swap="outerHTML"
    hx-post="/system/cluster/update-status"
    hx-trigger="click throttle:1000ms"
    hx-vals="">
    ⟳ Refresh
  </a>
</h4>

<div id="system-status">
  <section id="system-status-cards" class="grid-auto-cols">
    <article>
      <h5>{{ data.status.CLUSTER_PEERS_LOCAL.name }} 🏠</h5>
      <p>
        <small>This node.</small>
      </p>
      <ul>
      {% for k, v in data.status.CLUSTER_PEERS_LOCAL %}
        <li><span class="color-zinc-600">{{ k.split("_")|join(" ")|capitalize }}</span>:
        {% if k == "swarm_complete" and not v %}
          <span class="color-red">{{ v }}</span>
        {% else %}
          {{ v }}<br>
        {% endif %}
        </li>
      {% endfor %}
      </ul>
    </article>
    {% for peer, peer_data in data.status.CLUSTER_PEERS_REMOTE_PEERS.items() %}
    <article>
      <h5>{{ peer }} {% if peer == data.status.CLUSTER_PEERS_LOCAL.leader %}👑{% endif %}</h5>
      <ul>
      {% for k, v in peer_data %}
        <li><span class="color-zinc-600">{{ k.split("_")|join(" ")|capitalize }}</span>:
        {% if k == "streams" %}
          {% if v._in %}Inbound OK{% else %}<span class="color-red">Inbound failed</span>{% endif %},
          {% if v.out %}Outbound OK{% else %}<span class="color-red">Inbound failed</span>{% endif %}<br>
        {% elif k == "swarm_complete" and not v %}
          <span class="color-red">{{ v }}</span>
        {% else %}
          {{ v }}<br>
        {% endif %}
        </li>
      {% endfor %}
      </ul>
    </article>
    {% endfor %}
  </section>

  <div hx-trigger="htmx:afterRequest[event.detail.successful==true] from:button"
    hx-swap="outerHTML"
    hx-get="/system/status"
    hx-target="#system-status"
    hx-select="#system-status">
    {% if not ENFORCE_DBUPDATE  %}
    <button type="submit"
      hx-trigger="click queue:first"
      hx-confirm="This action will overwrite table data on nodes with a mismatching database, are you sure?"
      hx-post="/system/cluster/db/enforce-updates" hx-vals='{"toggle": "on"}' hx-target="#nav-sub-secondary">
        🟢 Enforce database updates
    </button>
    {% else %}
    <button type="submit" hx-trigger="click queue:first"
      hx-post="/system/cluster/db/enforce-updates" hx-vals='{"toggle": "off"}'>
        🔴 Stop enforcing database updates
    </button>
    {% endif %}
    {% if ENFORCE_DBUPDATE and request.headers.get("Hx-Request") %}
    {# oob-swapping a button to menu #}
    <div id="enforce-dbupdate" hx-swap-oob="outerHTML">
      <button data-tooltip="Enforced database updates are enabled"
          class="button-red-800"
          id="enforce-dbupdate-button"
          hx-get="/system/status"
          _="on load call countdownSeconds(me, {{ ENFORCE_DBUPDATE }}) end">
            !!!
      </button>
    </div>
    {% endif %}
  </div>

</div>
<hr>

<p class="no-text-wrap">
  <small>
    <sup>1</sup> Critical protocol errors (e.g. checksum mismatches).<br>
    <sup>2</sup> The cluster peer's meta data is updated in transaction (lazy-update).<br>
  </small>
</p>

{% endblock body %}