@if (items?.length) {
  <ng-container>
    @for (item of items; track item) {
      <openlp-service-item
        [item]="item"
        [selected]="item.selected"
        (selectItem)="onItemSelected($event)"
        [tabindex]="item.id">
      </openlp-service-item>
    }
  </ng-container>
}
@else if (!loading) {
  <div class="no-items">
    <div class="no-items-title">
      <span class="material-icons icon">info</span>
      {{ 'NO_SERVICE_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' | translate }}
      </a>
    </div>
  </div>
}