<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <!--TODO: read this from the config (menu item title)-->
    <ion-title>{{ 'catalog.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-segment
    (ionChange)="segmentChanged($event)"
    [value]="selectedSemesterUID"
    mode="md"
  >
    <ion-segment-button
      *ngFor="let semester of availableSemesters"
      [value]="semester.uid"
    >
      <ion-label>{{ semester.acronym }}</ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-list *ngIf="catalogs && catalogs.length > 0">
    <ion-item
      *ngFor="let catalog of catalogs"
      button="true"
      lines="inset"
      (click)="notifySelect(catalog)"
    >
      <ion-label>
        <h2>{{ catalog.name }}</h2>
        <h3>{{ catalog.acronym }}</h3>
      </ion-label>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="!catalogs">
    <stapps-skeleton-list-item *ngFor="let skeleton of [].constructor(10)">
    </stapps-skeleton-list-item>
  </ion-list>
  <ion-grid *ngIf="catalogs && catalogs.length === 0">
    <ion-row>
      <ion-col>
        <div class="ion-text-center margin-top">
          <ion-label>
            {{ 'catalog.detail.EMPTY_SEMESTER' | translate }}
          </ion-label>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
