{% 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 #}
    <div class="mb-4 control has-icons-left has-icons-right">
      <input class="input" type="text" placeholder="{{ _('Search') }}" x-model="search" />
      <span class="icon is-small is-left">
        <i class="fas fa-search"></i>
      </span>
    </div>

    {# 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>{{ _('Id') }}</th>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Finished') }}</th>
          <th>{{ _('Size') }}</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="row in paginatedData" :key="row.id || row.key">
          <tr>
            <td x-text="row.id"></td>
            <td x-text="row.path"></td>
            <td x-text="row.finished ? new Date(row.finished).toLocaleString(undefined, dateTimeOption) : ''"></td>
            <td x-text="row.local_size"></td>
          </tr>
        </template>
      </tbody>
    </table>

    {# Pagination controls #}
    <nav class="pagination is-right" role="navigation" aria-label="pagination">
      <a href="#" class="pagination-previous"  :class="{ 'is-disabled': page === 1 }" @click.prevent="if(page>1) page--">{{ _('Previous') }}</a>
      <a href="#" class="pagination-next"  :class="{ 'is-disabled': page === totalPages }"   @click.prevent="if(page<totalPages) page++">{{ _('Next') }}</a>
      <ul class="pagination-list">
        <template x-for="pObj in visiblePages" :key="pObj.page ?? Math.random()">
          <li>
            <a href="#" class="pagination-link" :class="{ 'is-current': page === pObj.page, 'is-disabled': pObj.isEllipsis }" @click.prevent="if(!pObj.isEllipsis) page = pObj.page" x-text="pObj.isEllipsis ? '…' : pObj.page"></a>
          </li>
        </template>
      </ul>
    </nav>
  </div>

</div>
{% endblock %}