{# Used in Downloaded / Uploaded pages #}
{% macro render_pagination() %}
<nav class="pagination is-right" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous" :class="{ 'is-disabled': page === 1 }" @click.prevent="prevPage()">{{ _('Previous') }}</a>
  <a href="#" class="pagination-next" :class="{ 'is-disabled': page === totalPages }" @click.prevent="nextPage()">{{ _('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) goToPage(pObj.page)"
          x-text="pObj.isEllipsis ? '…' : pObj.page">
        </a>
      </li>
    </template>
  </ul>
</nav>
{% endmacro %}

{% macro render_search() %}
<div class="mb-4 control has-icons-left has-icons-right">
  <label for="search" class="is-sr-only">{{ _('Search') }}</label>
  <input id="search" class="input" type="text" placeholder="{{ _('Search') }}" x-model="search" @input.debounce.300ms="load()" />
  <span class="icon is-small is-left">
    <i class="fas fa-search"></i>
  </span>
</div>
{% endmacro %}