
  <%- include('./partials/head.ejs') %>

<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Navbar -->
  <%- include('./partials/navigation.ejs') %>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  
  <%- include('./partials/sidebar.ejs') %>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Dashboard</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/admin">Home</a></li>
              <li class="breadcrumb-item active">Dashboard </li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
   <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-10 offset-1">
            <div class="row">
              <div class="col-md-6">
                <div class="total bg-info">
                  <h2 class="py-3">Total Users</h2>
                  <h2><%= totalUsers %></h2>
                  
                  
                </div>
              </div>
              <div class="col-md-6">
                <div class="total bg-warning">
                  <h2 class="py-3">Total Minted Token</h2>
                  <h2><%= totalTokens.total_issued %></h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-10 offset-1">
            <div class="row">
              <div class="col-md-6 offset-3 my-5">
                <ul class="global-label">
                  <li class="graphData" data-id="day">
                    <a class="active " >Day</a>
                  </li>
                  <li class="graphData"  data-id="week">
                    <a class="">Week</a>
                  </li>
                  <li class="graphData" data-id="month">
                    <a class="" >Month</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="row">
              <div class="col-md-8 offset-2">
                <div class="graph" id="graphData">
                  <canvas id="myChart" width="300" height="300"></canvas>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->

  <!-- Main Footer -->
 
</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<%- include('./partials/scripts.ejs') %>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->

<script src="/plugins/chart/chart.js"></script>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: <%- JSON.stringify(withdraw) %>,
        datasets: [{
          label: 'Minted Token',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1,
          data: <%- JSON.stringify(withdraw) %>
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false,
          },
          datalabels: {
            display: false
          },
          title: {
            display: true,
          }
        },
        responsive: true,
        scales: {
          x: {
            grid: {
              display: true,
              drawBorder: true,
            },
            beginAtZero: true
          },
          y: {
            grid: {
              display: true,
              drawBorder: true,
            },
            beginAtZero: true
          }
        }
      }
  });
</script>
</body>
</html>
