<!DOCTYPE html>
  {% load static %}
  {% include 'taskboard/head.html' %}
  <body id="page-top">
    <div id="wrapper">
      {% include 'taskboard/sidebar.html' %}
      <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
          {% include 'taskboard/topbar.html' %}
          <div class="container-fluid">
            <div class="row">
              <div class="col-xl-5 col-lg-12 col-md-12 col-s-12 col-xs-12 mb-4">
                <div class="card border-left-primary shadow py-2 mb-4">
                  <div class="card-body">
                    <div class="row no-gutters align-items-center">
                      <div class="col mr-2">
                        <div class="text-s mt-2 font-weight-bold text-primary text-uppercase">Information</div>
                        <div id="info">
                          <div id="brand" class="h5 mt-4 mb-3 font-weight-bold text-gray-800"></div>
                          <div id="cores" class="h6 mb-1 font-weight text-gray-800"></div>
                          <div id="architecture" class="h6 mb-2 font-weight text-gray-800"></div>
                        </div>
                        <div id="load">
                          <div class="h6 mt-3 mb-3 font-weight text-gray-800">&nbsp;</div>
                          {% include 'taskboard/loader.html' %}
                          <div class="h6 mb-1 font-weight text-gray-800">&nbsp;</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card border-left-primary shadow py-2">
                  <div class="card-body">
                    <div class="row no-gutters align-items-center">
                      <div class="col mr-2">
                        <div class="text-s mt-2 font-weight-bold text-primary text-uppercase">Utilization</div>
                        <div class="row mt-4">
                          <div class="col-md-6">
                            <div class="text-s font-weight-bold text-uppercase mb-2">0%</div>
                          </div>
                          <div class="col-md-6">
                            <span class="float-right">
                            <div class="text-s font-weight-bold text-uppercase mb-2">100%</div>
                            </span>
                          </div>
                        </div>
                        <div class="progress mb-4">
                          <div id="utilization" class="progress-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-3 col-lg-6 col-md-12 col-s-12 col-xs-12 mb-4">
                <div class="card shadow">
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Times</h6>
                  </div>
                  <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                      <canvas id="chart_times"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                      <span class="mr-2">
                        <i class="fas fa-circle text-primary"></i> User
                      </span>
                      <span class="mr-2">
                        <i class="fas fa-circle text-warning"></i> System
                      </span>
                      <span class="mr-2">
                        <i class="fas fa-circle text-success"></i> Idle
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 col-md-12 col-s-12 col-xs-12 mb-4">
                <div class="card shadow">
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Statistics</h6>
                  </div>
                  <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                      <canvas id="chart_statistics"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                      <span class="mr-2">
                        <i class="fas fa-circle text-primary"></i> CTX Switches
                      </span>
                      <span class="mr-2">
                        <i class="fas fa-circle text-danger"></i> Interrupts
                      </span>
                      <span class="mr-2">
                        <i class="fas fa-circle text-warning"></i> Soft interrupts
                      </span>
                      <span class="mr-2">
                        <i class="fas fa-circle text-success"></i> Syscalls
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xl-12 col-lg-12 col-md-12 col-s-12 col-xs-12">
                <div class="card shadow mb-4">
                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Load Overview</h6>
                  </div>
                  <div class="card-body">
                    <div class="chart-area">
                      <canvas id="chart_utilization"></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% include 'taskboard/footer.html' %}
      </div>
    </div>
    {% include 'taskboard/modal-logout.html' %}
    {% include 'taskboard/scripts.html' %}
    <script src="{% static 'taskboard/js/cpu/information.js' %}"></script>
    <script src="{% static 'taskboard/js/cpu/utilization.js' %}"></script>
    <script src="{% static 'taskboard/js/cpu/chart_times.js' %}"></script>
    <script src="{% static 'taskboard/js/cpu/chart_statistics.js' %}"></script>
    <script src="{% static 'taskboard/js/cpu/chart_utilization.js' %}"></script>
  </body>
</html>
