{% import 'components/macros.html' as macro %}

{% extends 'base.html' %}

{% block header %}
  <h1 class="title">{% block title %}{{ _('Statistics') }}{% endblock %}</h1>
{% endblock %}

{% block content %}
<script>
  window.StatsConfig = {
    urls: {
      month: {{- url_for('api.downloads_downloads_stats_by_month') | tojson -}},
      year: {{- url_for('api.downloads_downloads_stats_by_year') | tojson -}},
      mimeType: {{- url_for('api.downloads_downloads_stats_by_mime_type') | tojson -}},
      source: {{- url_for('api.uploads_uploads_stats_by_source') | tojson -}}
    }
  };
</script>
<div
  x-data="StatsPeriod"
  x-init="init()"
>
  <div class="row mb-3">
    <div class="cold-12 col-md-12 col-lg-6 mb-2">
      <h2 class="h4">{{ _('Total') }}</h2>
      <table class="table">
        <thead>
          <tr>
            <th>{{ _('Number of files downloaded') }}</th>
            <th>{{ _('Total size of files downloaded') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ stats_total.files }}</td>
            <td>{{ stats_total.total_size }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="cold-12 col-md-12 col-lg-6 mb-2">
      <div class="row">
        <div class="col-md-6 offset-md-6 text-end">
          {{ macro.datepicker_range('period') }}
        </div>
      </div>
    </div>
  </div>

  {% set col_class = 'col-12 col-md-6' if doughnut_legend_display else 'col-12 col-md-4' %}
  <div class="row mb-5 justify-content-around">
    <div class="{{ col_class }}">
      <h2 class="h4">{{ _('Files by MIME type') }}</h2>
      <canvas id="filesByMimeType"></canvas>
    </div>
    <div class="{{ col_class }}">
      <h2 class="h4">{{ _('Size by MIME type') }}</h2>
      <canvas id="sizeByMimeType"></canvas>
    </div>
  </div>
  <div class="row mb-5 justify-content-around">
    <div class="{{ col_class }}">
      <h2 class="h4">{{ _('Torrents by source') }}</h2>
      <canvas id="torrentBySource"></canvas>
    </div>
    <div class="{{ col_class }}">
      <h2 class="h4">{{ _('Size by source') }}</h2>
      <canvas id="sizeBySource"></canvas>
    </div>
  </div>

  <div class="row mb-5">
    <div class="col-12 col-md-6">
      <h2 class="h4">{{ _('Downloads by year') }}</h2>
      <canvas id="statsByYear"></canvas>
    </div>
    <div class="col-12 col-md-6">
      <h2 class="h4">{{ _('Downloads by month') }}</h2>
      <canvas id="statsByMonth"></canvas>
    </div>
  </div>
</div>
{% endblock %}