{% extends "base.html" %}

{% block content %}
<div class="row g-3">
  <div class="col-12 col-xl-4 order-1 order-xl-1">
    <div class="card mb-3">
      <div class="card-header">System Stats</div>
      <div class="card-body p-2">
        <dl class="mb-0">
          <dt>Processor</dt>
          <dd>
            {% include "bussdcc_system/stats/components/_cpu_usage_bar.html" %}
          </dd>

          <dt>Processor Temp</dt>
          <dd>
            {% include "bussdcc_system/stats/components/_cpu_temperature_card.html" %}
          </dd>

          <dt>System Load (1m/5m/15m)</dt>
          <dd>
            {% include "bussdcc_system/stats/components/_system_load_card.html" %}
          </dd>

          <dt>Memory</dt>
          <dd>
            {% include "bussdcc_system/stats/components/_memory_usage_bar.html" %}
            {% include "bussdcc_system/stats/components/_memory_usage_card.html" %}
          </dd>

          <dt>Disk</dt>
          <dd>
            {% include "bussdcc_system/stats/components/_disk_usage_bar.html" %}
            {% include "bussdcc_system/stats/components/_disk_usage_card.html" %}
          </dd>

          <dt>Network</dt>
          <dd>
            {% include "bussdcc_system/stats/components/_network_usage_card.html" %}
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="col-12 col-xl-8 order-2 order-xl-2">
    <div class="card mb-3">
      <div class="card-header">CPU Usage (last 5 min)</div>
      <div class="card-body p-2">
        {% include "bussdcc_system/stats/components/_cpu_chart.html" %}
      </div>
    </div>
    <div class="card mb-3">
      <div class="card-header">Network Traffic (last 5 min)</div>
      <div class="card-body p-2">
        {% include "bussdcc_system/stats/components/_network_chart.html" %}
      </div>
    </div>
  </div>
</div>
{% endblock %}