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

{% extends 'base.html' %}

{% block header %}
<h1 class="h2">{% block title %}{{ _('Last files downloaded') }}{% endblock %}</h1>
{% endblock %}

{% block content %}
<p class="fst-italic">{{ _('List of last files downloaded from the seedbox to the NAS.') }}</p>

<div x-data="TablePaginedComponent('{{ url_for('api.downloads_downloads_list') }}?limit=1000&finished=true', 20, 'downloaded')">

  {# Filters #}
  <div class="row mb-2">
    <div class="col-12 col-md-8  mb-2">
      {{ macro.render_search() }}
    </div>
    <div class="col-12 col-md-4 text-end  mb-2">
      {{ macro.datepicker_range('downloaded', False) }}
    </div>
  </div>

  {# Messages #}
  <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 #}
  <table x-show="data.length > 0" class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th>{{ _('Name') }}</th>
        <th>{{ _('Finished') }}</th>
        <th class="d-none d-md-table-cell">{{ _('Size') }}</th>
        <th class="narrow"></th>
      </tr>
    </thead>
    <tbody>
      <template x-for="row in data" :key="row.id || row.key">
        <tr>
          <td class="overflow-anywhere">
            <span class="text-nowrap">{{- macro.mime_icon() -}}</span><span x-text="row.path"></span>
          </td>
          <td  x-text="row.finished ? new Date(row.finished).toLocaleString(undefined, dateTimeOption) : ''"></td>
          <td class="d-none d-md-table-cell text-nowrap" x-text="row.human_local_size"></td>
          <td class="text-end">
            <button type="button" class="btn btn-outline-danger btn-sm text-nowrap"
                aria-label="{{ _('Delete') }}"
                data-bs-toggle="tooltip" data-bs-title="{{ _('Delete') }}"
                x-init="new Tooltip($el)"
                @click="$dispatch('open-modal-confirm-call', {
                  url: '{{ url_for('api.downloads_downloads', id=0) }}'.replace('0', row.id),
                  method: 'DELETE',
                  title: '{{ _('Delete?') }}',
                  content: `{{ _('Do you want to delete this download?') }}<br><em>${row.path}</em>`,
                  toastMessage: `<em>${row.path}</em> {{ _('has been deleted') }}.`,
                  toastTitle: `{{ _('Deleted') }}.`
                })">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
          </td>
        </tr>
      </template>
    </tbody>
  </table>

  {# Pagination controls #}
  {{ macro.render_pagination() }}

</div>
{% endblock %}