{% extends "base.html" %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<h3>Dashboard</h3>
<div class="row">
    <div class="col-md-6">
        <h4>Funk Manager</h4>
        <p>Manage unlimit Frenet Funk Sim-Cards.</p>
    </div>
    <div class="col-md-6">
        <h4>Sim Cards</h4>
        <canvas id="doughnut-chart"></canvas>
    </div>
</div>
<script>
new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
      labels: [{% for p in plans %}'{{ p }}',{% endfor %}],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [{% for p in plans %}{{ plans[p] }},{% endfor %}]
        }
      ]
    },
    options: {
    }
});
</script>
{% endblock %}