<div class="fullscreen background"></div>
@if (showType) {
<div [style.font-size.px]="zoom" class="fullscreen background">
  <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
  <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
  <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
  <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
  <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
  <div
    [@songSwitch]="songId"
    [class.blur]="songId === 'title' || songId === 'dynamicText'"
    [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
    [class.no-logo]="presentationBackground!=='none'"
    class="start fullscreen logo"
  >
    <app-logo></app-logo>
  </div>
  @if (songId === 'title') {
  <div @songSwitch class="start fullscreen">
    <div>{{ showType | showType }}</div>
    <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
  </div>
  } @if (songId === 'dynamicText') {
  <div @songSwitch class="start fullscreen dynamic-text">
    <div>{{ presentationDynamicCaption }}</div>
    <div class="date">{{ presentationDynamicText }}</div>
  </div>
  } @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
  <app-song-text
    [@songSwitch]="songId"
    [fullscreen]="true"
    [header]="song.title"
    [index]="index??0"
    [showComments]="false"
    [showSwitch]="false"
    [text]="song.text"
    chordMode="hide"
  ></app-song-text>
  } @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
  <app-legal [@songSwitch]="songId" [config]="config$ | async" [song]="song"></app-legal>
  }
</div>
}
