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

{% extends 'base.html' %}

{% block header %}
<div class="mb-3">
  <h1 class="mb-0">{% block title %}{{ _('Statistics') }}{% endblock %}</h1>
  <p class="text-body-secondary mb-0">
    {{ _('All statistics transfert statistics in one place.') }}
  </p>
</div>
{% endblock %}

{% block content %}
<script>window.StatsConfig = { urls: {
month: {{- url_for('api.downloads_stats_downloads_stats_by_month') | tojson -}},
year: {{- url_for('api.downloads_stats_downloads_stats_by_year') | tojson -}},
mimeType: {{- url_for('api.downloads_stats_downloads_stats_by_mime_type') | tojson -}},
source: {{- url_for('api.uploads_stats_uploads_stats_by_source') | tojson -}}
}};</script>


<div x-data="CardsStats('{{ url_for('api.downloads_stats_downloads_stats') }}', {{ webui_dashboard_refresh }})"
     class="row g-3">
  {{macro.card_stats(
    _('Downloads'), _('Last %(hours)s hours', hours=24),
    'download', 'text-primary',
    'data?.last24h'
  )}}
  {{macro.card_stats(
    _('Downloads'), _('Last %(days)s days', days=7),
    'download', 'text-primary',
    'data?.last7d'
  )}}
  {{macro.card_stats(
    _('Downloads'), _('Last %(days)s days', days=30),
    'download', 'text-primary',
    'data?.last30d'
  )}}
  {{macro.card_stats(
    _('Downloads'), _('This year'),
    'download', 'text-primary',
    'data?.year'
  )}}
  <div class="col-12 col-sm-6 col-md-4 col-xl-3 col-xxl-2">
    <div class="card h-100 bg-body-secondary">
      <div class="card-body">
        <div class="d-flex align-items-center gap-3">
          <div class="border rounded-3 p-2"><i class="fa-solid text-secondary fa-calculator fs-5"></i></div>
          <div>
            <div class="fw-semibold fs-7">{{ _('Downloads') }}</div>
            <div class="text-body-secondary fs-7">{{ _('Total') }}</div>
          </div>
        </div>
        <div class="fs-2 fw-semibold mt-3">{{ stats_total.total_size }}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-4 col-xl-3 col-xxl-2">
    <div class="card h-100 bg-body-secondary">
      <div class="card-body">
        <div class="d-flex align-items-center gap-3">
          <div class="border rounded-3 p-2"><i class="fa-solid text-secondary fa-calculator fs-5"></i></div>
          <div>
            <div class="fw-semibold fs-7">{{ _('Downloads') }}</div>
            <div class="text-body-secondary fs-7">{{ _('Total') }}</div>
          </div>
        </div>
        <div class="fs-2 fw-semibold mt-3">{{ stats_total.files }}</div>
      </div>
    </div>
  </div>
</div>
<div x-data="CardsStats('{{ url_for('api.uploads_stats_uploads_stats') }}', {{ webui_dashboard_refresh }})"
     class="row g-3 mt-1">
  {{macro.card_stats(
    _('Torrents'), _('Last %(hours)s hours', hours=24),
    'download', 'text-info',
    'data?.last24h', 'total', 'trend_total'
  )}}
  {{macro.card_stats(
    _('Torrents'), _('Last %(days)s days', days=7),
    'download', 'text-info',
    'data?.last7d', 'total', 'trend_total'
  )}}
  {{macro.card_stats(
    _('Torrents'), _('Last %(days)s days', days=30),
    'download', 'text-info',
    'data?.last30d', 'total', 'trend_total'
  )}}
  {{macro.card_stats(
    _('Torrents'), _('This year'),
    'download', 'text-info',
    'data?.year', 'total', 'trend_total'
  )}}
</div>


<div class="mt-4" x-data="StatsPeriod" x-init="init()">
  <div class="mb-5 d-flex justify-content-end">
    <div class="input-group input-group-sm w-auto">
      {{ macro.datepicker_range('period') }}
    </div>
  </div>

  <div class="row mb-4 justify-content-around">
    {{ macro.stats_chart(_('Top %(number)s files by MIME type', number=stats_bar_y_limit), 'filesByMimeType') }}
    {{ macro.stats_chart(_('Top %(number)s size by MIME type', number=stats_bar_y_limit), 'sizeByMimeType') }}
  </div>
  <div class="row mb-4 justify-content-around">
    {{ macro.stats_chart(_('Top %(number)s torrents by source', number=stats_bar_y_limit), 'torrentBySource') }}
    {{ macro.stats_chart(_('Top %(number)s size by source', number=stats_bar_y_limit), 'sizeBySource') }}
  </div>

  <div class="row mb-4">
    {{ macro.stats_chart(_('Downloads by year'), 'statsByYear', class='col-12') }}
  </div>
  <div class="row mb-4">
    {{ macro.stats_chart(_('Downloads by month'), 'statsByMonth', class='col-12') }}
  </div>
</div>
{% endblock %}