@if (show) {
  <div @fade>
    <app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
      [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
      @if (!progress) {
        <div class="song">
          @if (show) {
            <div class="song-parts">
              <div
                (click)="onSectionClick('title', -1, show.id)"
                [class.active]="show.presentationSongId === 'title'"
                class="song-part"
                >
                <div class="head">Veranstaltung</div>
              </div>
              <div
                (click)="onSectionClick('empty', -1, show.id)"
                [class.active]="show.presentationSongId === 'empty'"
                class="song-part"
                >
                <div class="head">Leer</div>
              </div>
            </div>
          }
        </div>
        @for (song of presentationSongs; track trackBy($index, song)) {
          <div class="song">
            @if (show) {
              <div
                [class.active]="show.presentationSongId === song.id"
                class="title song-part"
                >
                <div (click)="onSectionClick(song.id, -1, show.id)" class="head">
                  {{ song.title }}
                </div>
              </div>
            }
            @if (show) {
              <div class="song-parts">
                @for (section of song.sections; track section; let i = $index) {
                  <div
                    (click)="onSectionClick(song.id, i, show.id)"
            [class.active]="
              show.presentationSongId === song.id &&
              show.presentationSection === i
            "
                    class="song-part"
                    >
                    <div class="head">
                      {{ section.type | sectionType }} {{ section.number + 1 }}
                    </div>
                    <div class="fragment">{{ getFirstLine(section) }}</div>
                  </div>
                }
              </div>
            }
          </div>
        }
        <div class="song">
          @if (show) {
            <div
              [class.active]="show.presentationSongId === 'dynamicText'"
              class="title song-part"
              >
              <div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">
                Freier Text
              </div>
            </div>
          }
          <mat-form-field appearance="outline">
            <mat-label>Überschrift</mat-label>
            <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
              autocomplete="off" id="dynamic-caption"
              matInput
              type="text">
          </mat-form-field>
          <mat-form-field appearance="outline">
            <mat-label>Text</mat-label>
            <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
              autocomplete="off" id="dynamic-text"
            matInput></textarea>
          </mat-form-field>
        </div>
        @if (show) {
          <div class="div-bottom">
            <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
              <fa-icon [icon]="faDesktop"></fa-icon>
              Präsentation starten
            </button>
            <mat-form-field appearance="outline">
              <mat-label>Hintergrund</mat-label>
              <mat-select
                (ngModelChange)="onBackground($event, show.id)"
                [ngModel]="show.presentationBackground">
                <mat-option value="none">kein Hintergrund</mat-option>
                <mat-option value="blue">Sternenhimmel</mat-option>
                <mat-option value="green">Blätter</mat-option>
                <mat-option value="leder">Leder</mat-option>
                <mat-option value="praise">Lobpreis</mat-option>
                <mat-option value="bible">Bibel</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-slider
              #slider
              [max]="100"
              [min]="10"
              [step]="2"
              class="zoom-slider"
              color="primary"
              ngDefaultControl
              ><input (ngModelChange)="onZoom($event, show.id)"
              [ngModel]="show.presentationZoom"
              matSliderThumb>
            </mat-slider>
          </div>
        }
        @if (show) {
          <app-add-song
            [addedLive]="true"
            [showSongs]="showSongs"
            [show]="show"
            [songs]="songs$|async"
          ></app-add-song>
        }
      }
    </app-card>
  </div>
}
