<!DOCTYPE html>

<head>
  {{template "header.html" "Dashboard"}}
</head>


<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
  <div class="wrapper">
    {{template "navbar.html" "dashboard"}}

    <div class="page-wrapper">
      <!-- Header -->
      <header class="main-header " id="header">
        <nav class="navbar navbar-static-top navbar-expand-lg">
          <!-- Sidebar toggle button -->
          <button id="sidebar-toggler" class="sidebar-toggle">
            <span class="sr-only">Toggle navigation</span>
          </button>
        </nav>
      </header>


      <div class="content-wrapper">
        <div class="content">
          <div class="row">
            <div class="col-xl-12 col-md-12">
              <!-- Sales Graph -->
              <div class="card card-default" data-scroll-height="675">
                <div class="card-header">
                  <h2>Download/Upload speed</h2>
                </div>
                <div class="card-body">
                  <canvas id="chart-general-network" class="chartjs"></canvas>
                </div>
                <div class="card-footer d-flex flex-wrap bg-white p-0">
                  <div class="col-6 px-0">
                    <div class="text-center p-4">
                      <h4 id="general-download-speed">...</h4>
                      <p class="mt-2">Download Speed</p>
                    </div>
                  </div>
                  <div class="col-6 px-0">
                    <div class="text-center p-4 border-left">
                      <h4 id="general-upload-speed">...</h4>
                      <p class="mt-2">Upload Speed</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xl-4 col-md-12">
              <!-- Doughnut Chart -->
              <div class="card card-default" data-scroll-height="675">
                <div class="card-header justify-content-center">
                  <h2>Main cache</h2>
                </div>
                <div class="card-body">
                  <canvas id="main-cache-chart"></canvas>
                </div>
                <div class="card-footer d-flex flex-wrap bg-white p-0">
                  <div class="col-6">
                    <div class="py-4 px-4">
                      <ul class="d-flex flex-column justify-content-between">
                        <li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
                            style="color: #4c84ff"></i>Used</li>
                      </ul>
                    </div>
                  </div>
                  <div class="col-6 border-left">
                    <div class="py-4 px-4 ">
                      <ul class="d-flex flex-column justify-content-between">
                        <li class="mb-2"><i class="mdi mdi-checkbox-blank-circle-outline mr-2"
                            style="color: #8061ef"></i>Free</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <footer class="footer mt-auto">
          <div class="copyright bg-white">
          </div>
        </footer>

      </div>
    </div>

    {{template "footer.html"}}
    <script src="assets/js/general_chart.js"></script>
    <script src="assets/js/cache_chart.js"></script>
    <script src="assets/js/dashboard.js"></script>
    <script>
      tstor.dashboard.loadView();
      setInterval(function () {
        tstor.dashboard.loadView();
      }, 2000)
    </script>
</body>

</html>