<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->

<ion-header>
  <ion-toolbar color="primary" mode="ios">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <!--TODO: read this from the config (menu item title)-->
    <ion-title>{{ 'catalog.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
  <ion-toolbar color="primary" mode="md">
    <ion-segment (ionChange)="segmentChanged($event)" [value]="selectedSemesterUID" mode="md">
      @for (semester of availableSemesters; track semester) {
        <ion-segment-button [value]="semester.uid">
          <ion-label>{{ semester.acronym }}</ion-label>
        </ion-segment-button>
      }
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  @if (catalogs && catalogs.length > 0) {
    <ion-list>
      @for (catalog of catalogs; track catalog) {
        <ion-item button="true" lines="inset" (click)="notifySelect(catalog)">
          <ion-label>
            <h2>{{ catalog.name }}</h2>
          </ion-label>
        </ion-item>
      }
    </ion-list>
  }
  @if (!catalogs) {
    <ion-list>
      @for (skeleton of [].constructor(10); track skeleton) {
        <stapps-skeleton-list-item> </stapps-skeleton-list-item>
      }
    </ion-list>
  }
  @if (catalogs && catalogs.length === 0) {
    <ion-grid>
      <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>
