<div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
  <div
    [@songSwitch]="songId"
    [class.blur]="songId === 'title'"
    [class.hide]="songId !== 'title' && songId !== 'empty'"
    class="start fullscreen logo"
  >
    <app-logo></app-logo>
  </div>

  <div *ngIf="songId === 'title'" @songSwitch class="start fullscreen">
    <div>{{ showType | showType }}</div>
    <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
  </div>

  <app-song-text
    [header]="song.title"
    *ngIf="songId !== 'title' && songId !== 'empty'"
    [@songSwitch]="songId"
    [fullscreen]="true"
    [index]="index"
    [showSwitch]="false"
    [text]="song.text"
    chordMode="hide"
  ></app-song-text>
  <app-legal
    *ngIf="songId !== 'title' && songId !== 'empty'"
    [@songSwitch]="songId"
    [config]="config$ | async"
    [song]="song"
  ></app-legal>
</div>
