{% extends "base.html" %}
{% block title %}Voxint — status{% endblock %}

{% block cb_breadcrumb %}settings /{% endblock %}
{% block cb_summary %}{% endblock %}
{% block cb_search %}{% endblock %}
{% block cb_actions %}{% endblock %}

{% block body %}
{% from "settings/_tab_strip.html" import settings_tabs with context %}
{{ settings_tabs("status") }}

<section class="oc-section" aria-label="System status">
  <div class="status-banner">
    <div class="sb-dot {% if overall_ok %}is-ok{% else %}is-warn{% endif %}"></div>
    <div class="sb-body">
      <strong class="sb-headline">{% if overall_ok %}Everything is running normally{% else %}Some parts need attention{% endif %}</strong>
      <span class="sb-detail">{{ install_summary }}</span>
    </div>
    <a class="cb-btn cb-btn-secondary" href="https://github.com/bengizmo/voxint/releases" target="_blank" rel="noopener">Check for updates</a>
  </div>
</section>

<div class="status-columns">
  <section class="oc-section" aria-label="Parts of Voxint">
    <h2 class="oc-section-title">PARTS OF VOXINT</h2>
    <ul class="component-list">
      {% for c in components %}
      <li class="component-row">
        <span class="cr-dot {% if c.dot == 'ok' %}is-ok{% elif c.dot == 'off' %}is-off{% else %}is-warn{% endif %}"></span>
        <span class="cr-name">{{ c.label }}</span>
        <span class="cr-state">{{ c.state_text }}</span>
        <span class="cr-action">
          {% if c.action_url %}
          {% if c.action_style == "primary" %}
          <a class="cb-btn cb-btn-primary" href="{{ c.action_url }}">{{ c.action_label }}</a>
          {% else %}
          <a href="{{ c.action_url }}">{{ c.action_label }}</a>
          {% endif %}
          {% endif %}
        </span>
      </li>
      {% endfor %}
    </ul>
  </section>

  <section class="oc-section" aria-label="Hardware gauges">
    <h2 class="oc-section-title">THIS COMPUTER RIGHT NOW</h2>
    <div id="status-gauges"
         hx-get="/settings/status" hx-trigger="every 15s" hx-swap="innerHTML">
      {% include "settings/_status_gauges.html" %}
    </div>
    <p class="oc-muted" style="margin-top:var(--space-3)">Speed settings (batch size, GPU on/off) live under <a href="/settings/hardware">Hardware</a>.</p>
  </section>
</div>
{% endblock %}