{% extends '_base.html' %} {% block styles %}
<style>
  .host {
    font-size: 1.2em;
    border: 1px solid var(--border-color);
    padding: 10px;
    margin-right: 10px;
    border-radius: 8px;
    background-color: var(--background-color);
    min-width: 280px;
  }
  .host h3 a {
    color: var(--blue);
  }
  .status-indicator {
    margin-bottom: 10px;
  }
  .status-indicator.online {
    color: var(--green);
  }
  .status-indicator.offline {
    color: var(--red);
  }
  .checkmk-status {
    margin-top: 10px;
    font-weight: bold;
  }
  .checkmk-status.online {
    color: var(--green);
  }
  .checkmk-status.offline {
    color: var(--red);
  }
</style>
{% endblock %} {% block content %}
<h2>Hosts</h2>
<div class="lcars-frame">
  {% for h in hosts %}
  <div class="host">
    <h3>
      <button
        class="panel-1-button"
        onclick="playSoundAndRedirect('audio1', '/host/{{ h.name }}')"
      >
        {{ h.name }}
      </button>
    </h3>
    <div class="status-indicator {{ h.status }}">Status: {{ h.status }}</div>
    CPU: {{ h.cpu }}<br />
    Memory: {{ h.memory }}GB<br />
    VMs: {{ h.vm_count }}<br />
    Containers: {{ h.lxc_count }}<br />
    <div
      class="checkmk-status {% if h.check_mk.get('extensions') and h.check_mk.get('extensions').is_offline %}offline{% else %}online{% endif %}"
    >
      Monitoring: {% if h.check_mk.get('extensions') and
      h.check_mk.get('extensions').is_offline %}OFFLINE{% else %}ONLINE{% endif
      %}
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}