{% extends "user_app/base.html" %}

{% load i18n humanize %}

{% block title %}{% trans "Statistics" %}{% endblock %}

{% block right_column %}
<div class="card">
  <div class="card-body">
    <h1>{% trans "Statistics" %}</h1>

    <div class="d-flex mb-4">
      <div class="alert alert-primary flex-even m-1 text-center overflow-hidden">
        <h3 class="display-4">{{ completed_count }}</h3>
        <h6>{% trans "Completed activities" %}</h6>
        <i class="fas fa-check fa-7x centrize" style="opacity: 0.1"></i>
      </div>
      <div class="alert alert-primary flex-even m-1 text-center overflow-hidden">
        <h3 class="display-4">{{ in_progress_count }}</h3>
        <h6>{% trans "In progress activities" %} </h6>
        <i class="far fa-clock fa-7x centrize" style="opacity: 0.1"></i>
      </div>
      <div class="alert alert-primary flex-even m-1 text-center overflow-hidden">
        <h3 class="display-4">0</h3>
        <h6>{% trans "Completed courses" %} </h6>
        <i class="fas fa-trophy fa-7x centrize" style="opacity: 0.1"></i>
      </div>
    </div>

    {% include "user_app/_achievements.html" %}

    {% include "user_app/_recent_progress.html" %}

  </div>
</div>
{% endblock %}