<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-back-button slot="start"></ion-back-button>
    <ion-title class="ion-text-center">{{ 'SOCIAL_MEDIA' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-segment (ionChange)="changeAccount($event)" mode="md" [value]="commAccounts">
  <div class="segmentAccount">
    <ion-segment-button class="segmentSubAccount" *ngFor="let account of socialNetworkAccounts" [value]="account.id">
      {{ account.name }}
    </ion-segment-button>
  </div>
</ion-segment>

<ion-content padding>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-down-outline" refreshingSpinner="ios"></ion-refresher-content>
  </ion-refresher>

  <div [ngSwitch]="commAccounts">
    <div *ngFor="let socialNetwork of activeSocialNetworks">
    </div>
    <ion-segment (ionChange)="changeSocialNetwork($event)" [value]="comms" scrollable>
      <ion-segment-button *ngFor="let socialNetwork of activeSocialNetworks" [value]="socialNetwork">
        <ion-icon [name]="'logo-'+socialNetwork"></ion-icon>
      </ion-segment-button>
    </ion-segment>

    <div [ngSwitch]="comms">
      <div *ngSwitchCase="'empty'" class="d-flex justify-content-center">
        <div class="banner-empty justify-content-center">
        </div>
      </div>

      <div *ngSwitchCase="'facebook'" class="d-flex justify-content-center">
        <div class="banner-facebook justify-content-center">
          <iframe [src]="sanitizer(facebook)" width="360" height="870" style="border:none;overflow:hidden"
            scrolling="yes" frameborder="0" allowfullscreen="true"
            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
          </iframe>
        </div>
      </div>

      <div *ngSwitchCase="'twitter'" class="justify-content-center">
        <div class="banner-twitter">
          <a class="twitter-timeline" data-chrome="nofooter" data-tweet-limit="this.tweet_limit"
            href="{{ twitter }}"></a>
        </div>
      </div>

      <div *ngSwitchCase="'instagram'" class="justify-content-center">
        <div class="banner-instagram" *ngFor="let ints of instagram">
          <div (click)="launchStorie(ints.link)">
            <iframe width="100%" style="height: 70vh;" [src]="ints.sanitizedSource" frameborder="0"
              allowfullscreen></iframe>
          </div>
        </div>
      </div>

      <div *ngSwitchCase="'tiktok'" class="justify-content-center">
        <div class="banner-video" *ngFor="let video of tiktoks">
          <iframe [src]="video.sanitizedSource" width="100%" height="800" scrolling="yes" frameborder="0"
            allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
            style="border:none;overflow:hidden">
          </iframe>
        </div>
      </div>

      <div *ngSwitchCase="'youtube'" class="justify-content-center">
        <div class="banner-video" *ngFor="let ytb of videos">
          <div (click)="launchVideo(ytb.link)">
            <iframe width="100%" height="240" [src]="ytb.sanitizedSource" frameborder="0" allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>