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

{% extends 'base.html' %}

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

{% block content %}
<div class="content">
  <p class="is-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')">

    {# Search #}
    {{ macro.render_search() }}

    {# Messages #}
    <div x-show="loading"><i class="fas fa-spinner fa-spin"></i> {{ _('Loading...') }}</div>
    <div x-show="error" class="notification is-danger"><i class="fas fa-triangle-exclamation"></i> {{ _('An error has occurred.') }}</div>
    <div x-show="!loading && !error && data.length === 0" class="notification is-warning"><i class="fas fa-inbox"></i> {{ _('No files downloaded yet...') }}</div>

    {# Table #}
    <table x-show="data.length > 0" class="table is-bordered is-striped is-hoverable is-fullwidth">
      <thead>
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Finished') }}</th>
          <th class="is-hidden-mobile">{{ _('Size') }}</th>
          <th class="is-narrow"></th>
        </tr>
      </thead>
      <tbody>
        <template x-for="row in data" :key="row.id || row.key">
          <tr>
            <td x-text="row.path"></td>
            <td x-text="row.finished ? new Date(row.finished).toLocaleString(undefined, dateTimeOption) : ''"></td>
            <td class="is-hidden-mobile" x-text="row.human_local_size"></td>
            <td class="has-text-right">
              <button class="button is-danger is-outlined"
                 @click="OpenModalConfirmCall(
                  '{{ url_for('api.downloads_downloads', id=0) }}'.replace('0', row.id),
                  'DELETE',
                  '{{ _('Delete?') }}',
                  `{{ _('Do you want to delete this download?') }}<br><em>${row.path}</em>`,
                  `<em>${row.path}</em> {{ _('has been deleted') }}.`,
                )">
                  <span class="is-hidden-mobile">{{ _('Delete') }}</span><span class="icon is-small"><i class="fas fa-times"></i></span>
              </button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>

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

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