<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title class="ion-text-center">{{ 'CLUB_CONTENT.CLUB_CONTENT' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-segment (ionChange)="changedTypeOrder($event)" [value]="typeContent">
  <ion-segment-button value="photo">
    <span>
      <ion-icon class="ion-no-margin" name="images-outline" size="large"></ion-icon>
      <br>
      {{ 'CLUB_CONTENT.PHOTOS' | translate }}
    </span>
  </ion-segment-button>
  <ion-segment-button value="video">
    <span>
      <ion-icon class="ion-no-margin" name="videocam-outline" size="large"></ion-icon>
      <br>
      {{ 'CLUB_CONTENT.VIDEOS' | translate }}
    </span>
  </ion-segment-button>
  <ion-segment-button value="podcast">
    <span>
      <ion-icon class="ion-no-margin" name="mic-outline" size="large"></ion-icon>
      <br>
      {{ 'CLUB_CONTENT.PODCASTS' | translate }}
    </span>
  </ion-segment-button>
  <ion-segment-button value="news">
    <span>
      <ion-icon class="ion-no-margin" name="newspaper-outline" size="large"></ion-icon>
      <br>
      {{ 'CLUB_CONTENT.NEWS' | translate }}
    </span>
  </ion-segment-button>
</ion-segment>

<ion-content (ionScrollStart)="onScroll($event)" [scrollEvents]="true">
  <div [ngSwitch]="typeContent">
    <div *ngSwitchCase="'photo'">
      <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>

      <app-card-publication *ngFor="let item of photoClub; let i = index;" [publication]="item"></app-card-publication>
    </div>

    <div *ngSwitchCase="'video'">
      <app-card-publication *ngFor="let item of videos; let i = index;" [publication]="item" [timeScroll]="timeScroll">
      </app-card-publication>
    </div>

    <div *ngSwitchCase="'podcast'">
      <app-card-publication *ngFor="let item of podcast; let i = index;" [publication]="item"></app-card-publication>
    </div>
    <div *ngSwitchCase="'news'">
      <app-card-publication *ngFor="let item of news; let i = index;" [publication]="item"></app-card-publication>
    </div>
  </div>
</ion-content>