<div class="clearfix mt-4 mb-1 border-bottom">
  <h1 class="float-md-start me-3">{{ title }} <span class="fs-4 text-accent" [hidden]="!jumpsCount">({{ jumpsCount }})</span></h1>
  <mat-spinner class="float-md-start" [diameter]="32" [hidden]="!loading" color="accent"></mat-spinner>
  <button [hidden]="!showAdd" mat-raised-button color="accent" [routerLink]="['/editor']" class="float-md-end">
    <mat-icon aria-label="Ajouter" fontIcon="add_notes"></mat-icon> Ajouter
  </button>
</div>
<span [hidden]="!jumps.length" class="small mt-2 me-2 fst-italic">Prix actualisés toutes les {{ (refresh / 1000) }} secondes.</span>
<span [hidden]="jumps.length || loading">Aucun produit à afficher pour le moment</span>
<span [hidden]="!loading">Chargement des produits en cours</span>
@for (jump of jumps; track jump) {
  <app-jump-preview [jump]="jump" [isUser]="isUser" [showMeta]="showMeta"></app-jump-preview>
}
<nav [hidden]="loading || pages.length <= 1" class="clearfix mt-3">
  <ul class="pagination float-end">
    @for (pageNumber of pages; track pageNumber) {
      <li class="page-item" [ngClass]="{'active': pageNumber === currentPage}">
        <button class="page-link" (click)="setPageTo(pageNumber)">{{ pageNumber }}</button>
      </li>
    }
  </ul>
</nav>