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

{% extends 'base.html' %}

{% block header %}
<div class="d-flex justify-content-between align-items-start mb-3">
  <div>
    <h1 class="mb-0">{% block title %}{{ _('Dashboard') }}{% endblock %}</h1>
    <p class="text-body-secondary mb-0">
      {{ _("Seedbox activity overview") }}
    </p>
  </div>

  <div class="text-end" x-data="LastRefresh">
    <button x-data
            class="btn btn-info btn-sm"
            @click="window.dispatchEvent(new CustomEvent('force-refresh'))">
      <i class="fa fa-refresh"></i> {{ _('Refresh') }}
    </button>
    <div class="small text-body-secondary mt-2">{{ _('Last update:') }} <span x-text="$localeDateString(lastRefresh)"></span></div>
  </div>
</div>
{% endblock %}

{% block content %}
<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-secondary',
    'data?.year'
  )}}
  <div class="col-12 col-sm-12 col-md-8  col-xl-6 col-xxl-4">
    <div class="card h-100 bg-body-secondary">
      <div class="card-body">
        <div class="text-body-primary fw-semibold mb-2 fs-5">{{ _('Services') }}</div>
        {% set sync_blackhole_enabled = seedboxsync_config.get('sync_blackhole_enabled') %}
        {% set sync_seedbox_enabled = seedboxsync_config.get('sync_seedbox_enabled') %}
        {% set services_enabled = sync_blackhole_enabled or sync_seedbox_enabled %}
        {% if sync_blackhole_enabled %}
          <div class="mb-2">{{ macro.task_box(_('Blackhole'), 'bolt', 'sync-blackhole', 'blackhole', 5) }}</div>
        {% endif %}
        {% if sync_seedbox_enabled%}
          {{ macro.task_box(_('Seedbox'), 'server', 'sync-seedbox', 'seedbox', 30) }}
        {% endif %}
        {% if not services_enabled %}
          {{ _('No service is enabled.')}}
        {% endif %}
      </div>
    </div>
  </div>
</div>

<div class="mt-4 card bg-body-tertiary shadow"
     x-data="TableComponent('{{ url_for('api.downloads_downloads_list') }}?limit=5&finished=false', {{ webui_dashboard_refresh }})">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <div>
        <h2 class="card-title fs-3">{{ _('Download in progress') }}</h2>
        <p class="card-subtitle mb-2 text-body-secondary">{{ _('List of downloads in progress from the seedbox to the NAS.') }}</p>
      </div>
      <button x-show="data.length > 0" class="btn btn-danger btn-sm js-modal-trigger"
        @click="$dispatch('open-modal-confirm-call', {
          url: '{{ url_for('api.downloads_downloads_progress') }}',
          method: 'DELETE',
          title: '{{ _('Purge?') }}',
          content: '{{ _('Do you want to purge all in-progress downloads?') }}',
          toastMessage: '{{ _('In-progress has been purged') }}'
        })">
        <i class="fa fa-trash"></i>{{ _('Purge') }}
      </button>
    </div>
    <div x-show="loading"><div class="spinner-border spinner-border-sm"></div> {{ _('Loading...') }}</div>
    <div x-show="error" class="alert alert-danger"><i class="fas fa-triangle-exclamation"></i> {{ _('An error has occurred.') }}</div>
    <div x-show="!loading && !error && data.length === 0" class="alert alert-info"><i class="fas fa-inbox"></i> {{ _('No download in progress now...') }}</div>
    <table x-show="data.length > 0" class="table table-bordered table-striped table-hover">
      <thead>
        <tr>
          <th>{{ _('Name') }}</th>
          <th class="d-none d-md-table-cell">{{ _('Started') }}</th>
          <th class="d-none d-md-table-cell">{{ _('Progress') }}</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="row in data" :key="row.id || row.key">
          <tr>
            <td class="filename-cell">
              <span class="filename cursor-pointer"
                    data-bs-toggle="tooltip" :data-bs-title="row.path"
                    x-init="new Tooltip($el)" x-text="row.path"></span>
              <span class="d-md-none" x-text="' - ' + row.progress + '%'"></span>
            </td>
            <td class="d-none d-md-table-cell">
              <span class="cursor-pointer"
                    data-bs-toggle="tooltip" :data-bs-title="row.started ? $localeDateString(row.started) : ''"
                    x-init="new Tooltip($el)" x-text="row.started ? $relativeTime(row.started) : ''"></span>
            </td>
            <td class="d-none d-md-table-cell">
              <div class="d-none d-md-block progress" role="progressbar" style="height: 25px;"
                   :aria-label="row.progress + '%'" aria-valuenow="row.progress" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary fs-6 fw-bold overflow-visible"
                     :style="{width: row.progress + '%'}" x-text="row.progress + '%'"></div>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</div>

<div class="row g-3">
  <div class="col-12 col-xl-6">
    <div class="mt-4 card bg-body-tertiary shadow"
         x-data="TableComponent('{{ url_for('api.downloads_downloads_list') }}?limit={{webui_dashboard_nb_elements}}&finished=true', {{ webui_dashboard_refresh }})">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <div>
            <h2 class="card-title fs-3">{{ _('Last files downloaded') }}</h2>
            <p class="card-subtitle mb-2 text-body-secondary">{{ _('List of last files downloaded from the seedbox to the NAS.') }}</p>
          </div>
          <a class="btn btn-sm btn-outline-info" href="{{ url_for('frontend.downloaded') }}"><i class="fas fa-eye"></i></a>
        </div>
        <div x-show="loading"><div class="spinner-border spinner-border-sm"></div> {{ _('Loading...') }}</div>
        <div x-show="error" class="alert alert-danger"><i class="fas fa-triangle-exclamation"></i> {{ _('An error has occurred.') }}</div>
        <div x-show="!loading && !error && data.length === 0" class="alert alert-warning"><i class="fas fa-inbox"></i> {{ _('No files downloaded yet...') }}</div>
          <table x-show="data.length > 0" class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th>{{ _('Name') }}</th>
              <th class="d-none d-md-table-cell">{{ _('Finished') }}</th>
            </tr>
          </thead>
          <tbody>
            <template x-for="row in data" :key="row.id || row.key">
              <tr>
                <td class="filename-cell">
                  <div class="d-flex align-items-center gap-2">
                    {{- macro.mime_icon() -}}
                    <span class="filename cursor-pointer"
                          data-bs-toggle="tooltip" :data-bs-title="row.path"
                          x-init="new Tooltip($el)" x-text="row.path"></span>
                  </div>
                </td>
                <td class="d-none d-md-table-cell">
                  <span class="cursor-pointer"
                        data-bs-toggle="tooltip" :data-bs-title="row.finished ? $localeDateString(row.finished) : ''"
                        x-init="new Tooltip($el)" x-text="row.finished ? $relativeTime(row.finished) : ''"></span>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-12 col-xl-6">
    <div class="mt-4 card bg-body-tertiary shadow"
         x-data="TableComponent('{{ url_for('api.uploads_uploads_list') }}?limit={{webui_dashboard_nb_elements}}')">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <div>
            <h2 class="card-title fs-3">{{ _('Last torrents uploaded') }}</h2>
           <p class="card-subtitle mb-2 text-body-secondary">{{ _('List of last torrents uploaded from the NAS to the seedbox.') }}</p>
          </div>
          <a class="btn btn-sm btn-outline-info" href="{{ url_for('frontend.uploaded') }}"><i class="fas fa-eye"></i></a>
        </div>
        <div x-show="loading"><div class="spinner-border spinner-border-sm"></div> {{ _('Loading...') }}</div>
        <div x-show="error" class="alert alert-danger"><i class="fas fa-triangle-exclamation"></i> {{ _('An error has occurred.') }}</div>
        <div x-show="!loading && !error && data.length === 0" class="alert alert-warning"><i class="fas fa-inbox"></i> {{ _('No torrent downloaded yet...') }} </div>
        <table x-show="data.length > 0" class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th>{{ _('Name') }}</th>
              <th class="d-none d-md-table-cell">{{ _('Sent') }}</th>
            </tr>
          </thead>
          <tbody>
            <template x-for="row in data" :key="row.id || row.key">
              <tr>
                <td class="filename-cell">
                  <div class="d-flex align-items-center gap-2">
                    {{- macro.torrent_icon() -}}
                    <span class="filename cursor-pointer"
                          data-bs-toggle="tooltip" :data-bs-title="row.name"
                          x-init="new Tooltip($el)" x-text="row.name"></span>
                  </div>
                </td>
                <td class="d-none d-md-table-cell text-nowrap" >
                    <span class="cursor-pointer"
                          data-bs-toggle="tooltip" :data-bs-title="row.sent ? $localeDateString(row.sent) : ''"
                          x-init="new Tooltip($el)" x-text="row.sent ? $relativeTime(row.sent) : ''"></span>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}