<div class="tags are-medium">
  {% if status.status == "ok" %}
    <span class="tag is-success is-light">
      <span class="icon is-small"><i class="fas fa-circle-check"></i></span>&nbsp;OK
    </span>
  {% elif status.status == "degraded" %}
    <span class="tag is-warning is-light">
      <span class="icon is-small"><i class="fas fa-triangle-exclamation"></i></span>&nbsp;Degraded
    </span>
  {% else %}
    <span class="tag is-info is-light">
      <span class="icon is-small"><i class="fas fa-spinner fa-spin"></i></span>&nbsp;Starting
    </span>
  {% endif %}
  {% if status.websocket_connected %}
    <span class="tag is-success is-light">WS Connected</span>
  {% else %}
    <span class="tag is-danger is-light">WS Disconnected</span>
  {% endif %}
</div>
<table class="table is-narrow is-fullwidth">
  <tbody>
    <tr>
      <th>Uptime</th>
      <td>
        {% if status.uptime_seconds is not none %}
          {% set hours = (status.uptime_seconds // 3600) | int %}
          {% set minutes = ((status.uptime_seconds % 3600) // 60) | int %}
          {{ hours }}h {{ minutes }}m
        {% else %}
          —
        {% endif %}
      </td>
    </tr>
    <tr>
      <th>Entities</th>
      <td>{{ status.entity_count }}</td>
    </tr>
    <tr>
      <th>Apps</th>
      <td>{{ status.app_count }}</td>
    </tr>
  </tbody>
</table>
