{% extends "admin/admin_base.html" %}
{% load static %}
{% block content-area %}

<div class="columns">
  <div class="column is-12">
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          Label stats
        </p>
        <a href="#" class="card-header-icon" aria-label="more options">
          <span class="icon">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </a>
      </header>
      <div class="card-content columns">
        <div class="column is-8">
          <line-chart :chart-data="labelData"></line-chart>
        </div>
        <div class="column is-4">
          <h2 class="subtitle">Annotation Progress</h2>
          <doughnut-chart :chart-data="progressData"></doughnut-chart>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="columns">
  <div class="column is-8">

    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          User stats
        </p>
        <a href="#" class="card-header-icon" aria-label="more options">
          <span class="icon">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </a>
      </header>
      <div class="card-content">
        <line-chart :chart-data="userData"></line-chart>
      </div>
    </div>
  </div>
</div>

{% endblock %}
{% block footer %}
<script src="{% static 'bundle/stats.js' %}"></script>
{% endblock %}