{%- extends "nav" -%}
{%- block card -%}
    {# ASSIGN VARIABLES #}
    {# ---------------- #}
    {%- if mem_stats -%}
    {% set mem_usage_percent = mem_stats.used / mem_stats.total * 100 | round -%}
    {% set mem_used = mem_stats.used / 1024 | round -%}
    {% set mem_free = mem_stats.free / 1024 | round -%}
    {% set mem_total = mem_stats.total / 1024 | round -%}
    {% endif -%}
    {% if cpu_stat_percent -%}
    {% set cpu_usage_percent = cpu_stat_percent.nice + cpu_stat_percent.system + cpu_stat_percent.user | round -%}
    {%- endif -%}
    {%- if disk_stats -%}
    {%- for disk in disk_stats -%}
    {%- set_global disk_usage_percent = disk.used_percentage -%}
    {# Calculate free disk space in megabytes #}
    {%- set_global disk_free = disk.one_k_blocks_free / 1024 | round -%}
    {%- endfor -%}
    {%- endif -%}
      <!-- DEVICE STATUS VIEW -->
      <div class="card center">
        <div class="card-container">
          <div class="three-grid">
            {# Display microservice status for network, oled & stats #}
            <!-- PEACH-NETWORK STATUS STACK -->
            <a class="link" href="/status/network">
              <div class="stack capsule{% if network_ping == "ONLINE" %} success-border{% else %} warning-border{% endif %}">
                <img id="networkIcon" class="icon{% if network_ping == "OFFLINE" %} icon-inactive{% endif %} icon-medium" alt="Network" title="Network microservice status" src="/icons/wifi.svg">
                <div class="stack" style="padding-top: 0.5rem;">
                  <label class="label-small font-near-black">Networking</label>
                  <label class="label-small font-near-black">{{ network_ping }}</label>
                </div>
              </div>
            </a>
            <!-- PEACH-OLED STATUS STACK -->
            <div class="stack capsule{% if oled_ping == "ONLINE" %} success-border{% else %} warning-border{% endif %}">
              <img id="oledIcon" class="icon{% if oled_ping == "OFFLINE" %} icon-inactive{% endif %} icon-medium" alt="Display" title="OLED display microservice status" src="/icons/lcd.svg">
              <div class="stack" style="padding-top: 0.5rem;">
                <label class="label-small font-near-black">Display</label>
                <label class="label-small font-near-black">{{ oled_ping }}</label>
              </div>
            </div>
            <!-- PEACH-STATS STATUS STACK -->
            <div class="stack capsule success-border">
              <img id="statsIcon" class="icon icon-medium" alt="Stats" title="System statistics microservice status" src="/icons/chart.svg">
              <div class="stack" style="padding-top: 0.5rem;">
                <label class="label-small font-near-black">Statistics</label>
                <label class="label-small font-near-black">AVAILABLE</label>
              </div>
            </div>
            {# Display status for dynsdns, config & sbot #}
            <!-- DYNDNS STATUS STACK -->
            <div class="stack capsule{% if dyndns_is_online %} success-border{% else %} warning-border{% endif %}">
              <img id="networkIcon" class="icon{% if dyndns_is_online != true %} icon-inactive{% endif %} icon-medium" alt="Dyndns" title="Dyndns status" src="/icons/dns.png">
              <div class="stack" style="padding-top: 0.5rem;">
                <label class="label-small font-near-black">Dyn DNS</label>
                <label class="label-small font-near-black">{% if dyndns_is_online %} ONLINE {% else %} OFFLINE {% endif %} </label>
              </div>
            </div>
            <!-- CONFIG STATUS STACK -->
            <div class="stack capsule{% if config_is_valid %} success-border{% else %} warning-border{% endif %}">
              <img id="networkIcon" class="icon{% if config_is_valid != true %} icon-inactive{% endif %} icon-medium" alt="Config" title="Config status" src="/icons/clipboard.png">
              <div class="stack" style="padding-top: 0.5rem;">
                <label class="label-small font-near-black">Config</label>
                <label class="label-small font-near-black">{% if config_is_valid %} LOADED {% else %} INVALID {% endif %} </label>
              </div>
            </div>
            <!-- SBOT STATUS STACK -->
            <a class="link" href="/status/scuttlebutt">
              <div class="stack capsule{% if sbot_is_online %} success-border{% else %} warning-border{% endif %}">
                <img id="networkIcon" class="icon{% if sbot_is_online != true %} icon-inactive{% endif %} icon-medium" alt="Sbot" title="Sbot status" src="/icons/hermies.svg">
                <div class="stack" style="padding-top: 0.5rem;">
                  <label class="label-small font-near-black">Sbot</label>
                  <label class="label-small font-near-black">{% if sbot_is_online %} ONLINE {% else %} OFFLINE {% endif %} </label>
                </div>
              </div>
            </div>
          </a>
          <div class="card-container">
            {# Display CPU usage meter #}
            {%- if cpu_stat_percent -%}
            <div class="flex-grid">
              <span class="card-text">CPU</span>
              <span class="label-small push-right">{{ cpu_usage_percent }}%</span>
            </div>
            <meter value="{{ cpu_usage_percent }}" min="0" max="100" title="CPU usage">
              <div class="meter-gauge">
                <span style="width: {{ cpu_usage_percent }}%;">CPU Usage</span>
              </div>
            </meter>
            {%- else -%}
            <p class="card-text">CPU usage data unavailable</p>
            {% endif -%}
            {# Display memory usage meter #}
            {%- if mem_stats %}
            <div class="flex-grid">
              <span class="card-text">Memory</span>
              <span class="label-small push-right">{{ mem_usage_percent }}% ({{ mem_free }} MB free)</span>
            </div>
            <meter value="{{ mem_used }}" min="0" max="{{ mem_total }}" title="Memory usage">
              <div class="meter-gauge">
                <span style="width: {{ mem_usage_percent }}%;">Memory Usage</span>
              </div>
            </meter>
            {%- else -%}
            <p class="card-text">Memory usage data unavailable</p>
            {% endif -%}
            {# Display disk usage meter #}
            {%- if disk_stats %}
            <div class="flex-grid">
              <span class="card-text">Disk</span>
              <span class="label-small push-right">{{ disk_usage_percent }}% ({% if disk_free > 1024 %}{{ disk_free / 1024 | round }} GB{% else %}{{ disk_free }} MB{% endif %} free)</span>
            </div>
            <meter value="{{ disk_usage_percent }}" min="0" max="100" title="Disk usage">
              <div class="meter-gauge">
                <span style="width: {{ disk_usage_percent }}%;">Disk Usage</span>
              </div>
            </meter>
            {%- else -%}
            <p class="card-text">Disk usage data unavailable</p>
            {%- endif %}
            {# Display system uptime in minutes #}
            {%- if uptime and uptime < 60 %}
            <p class="capsule center-text">Uptime: {{ uptime }} minutes</p>
            {# Display system uptime in hours & minutes #}
            {%- elif uptime and uptime > 60 -%}
            <p class="capsule center-text">Uptime: {{ uptime / 60 | round(method="floor") }} hours, {{ uptime % 60 }} minutes</p>
            {%- else -%}
            <p class="card-text">Uptime data unavailable</p>
            {%- endif %}
          </div>
          <!-- FLASH MESSAGE -->
          {% include "snippets/flash_message" %}
        </div>
      </div>
{%- endblock card %}