@if (slides?.length) {
  <ng-container>
    @for (slide of slides; track slide; let index = $index) {
      <openlp-slide-item
          [slide]="slide"
          [tabindex]="index"
          [selected]="slide.selected"
          (selectSlide)="onSlideSelected($event, index)">
      </openlp-slide-item>
    }
  </ng-container>
}
@else {
  @if (!loading) {
    <div class="no-items">
      <div class="no-items-title">
         <span class="material-icons icon">info</span>
         {{ 'NO_SLIDE_ITEMS' | translate }}.
      </div>
      <div class="no-items-actions">
        <a
          routerLink="/search"
          mat-stroked-button
          color="primary"
          size="small">
          <span class="material-icons">add</span>
          {{ 'ADD_ITEM_TO_SERVICE' | translate }}
        </a>
      </div>
    </div>
  }
}