@if (show$ | async; as show) {
  <div>
    <app-card
      [fullscreen]="useSwiper"
      closeLink="../"
    heading="{{ show.showType | showType }}, {{
      show.date.toDate() | date: 'dd.MM.yyyy'
    }} - {{ getStatus(show) }}"
      >
      @if (!useSwiper) {
        <p class="show-meta">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
          <app-user-name [userId]="show.owner"></app-user-name>
          <ng-container *appOwner="show.owner">
            <app-badge [type]="getPublishedBadgeType(show)">{{ show.published | publishedType }}</app-badge>
            @if (show.reportedType) {
              <app-badge [type]="getReportedTypeBadgeType(show)">{{ show.reportedType | reportedType }}</app-badge>
            }
          </ng-container>
        </p>
      }
      <div class="head">
        <div>
          @if (!useSwiper) {
            <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
          }
        </div>
        <div [class.floating]="useSwiper">
          <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
          matTooltip="Verkleinern"></app-menu-button>
          <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
          matTooltip="Vergrößern"></app-menu-button>
          <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
            [icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
          matTooltip="Vollbild"></app-menu-button>
        </div>
      </div>
      @if (showSongs && !useSwiper) {
        <div (cdkDropListDropped)="drop($event, show)"
          [cdkDropListDisabled]="show.published || showText"
          [style.--song-key-column-width]="getSongKeyColumnWidth(show)"
          [style.font-size]="textSize + 'em'"
          cdkDropList
          class="song-list">
          @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
            <div cdkDrag class="song-row">
              <app-song
                [dragHandle]="!(show.published || showText)"
                [fullscreen]="useSwiper"
                [index]="i"
                [showId]="showId"
                [showSong]="song"
                [showText]="showText"
                [show]="show"
              ></app-song>
            </div>
          }
        </div>
      }
      @if (useSwiper) {
        <swiper-container scrollbar="true">
          @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
            <swiper-slide
              [style.font-size]="textSize + 'em'"
              class="song-swipe">
              <app-song
                [fullscreen]="true"
                [index]="i"
                [showId]="showId"
                [showSong]="song"
                [showText]="true"
                [show]="show"
              ></app-song>
              <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
              @if (getNextSong(orderedShowSongs(show), i); as next) {
                <div class="next-song">{{ next }}
                  <fa-icon [icon]="faNextSong"></fa-icon>
                </div>
              }
            </swiper-slide>
          }
        </swiper-container>
      }
      @if (songs$ | async; as songs) {
        @if (songs && !show.published && !useSwiper) {
          <app-add-song
            [showSongs]="showSongs"
            [show]="show"
            [songs]="songs"
          ></app-add-song>
        }
      }
      @if (!useSwiper) {
        <app-button-row>
          <ng-container *appRole="['leader']">
            <ng-container *appOwner="show.owner">
              @if (!show.archived) {
                <app-button (click)="onArchive(true)" [icon]="faBox">
                  Archivieren
                </app-button>
              }
              @if (show.archived) {
                <app-button (click)="onArchive(false)" [icon]="faBoxOpen">
                  Wiederherstellen
                </app-button>
              }
              @if (!show.published) {
                <app-button (click)="onPublish(show, true)" [icon]="faPublish">
                  Veröffentlichen
                </app-button>
              }
              @if (show.published) {
                <app-button (click)="onPublish(show, false)" [icon]="faUnpublish">
                  Veröffentlichung zurückziehen
                </app-button>
              }
              @if (show.published) {
                <app-button (click)="onShare(show)" [icon]="faShare">
                  Teilen
                </app-button>
              }
              @if (show.published && show.reportedType === 'pending') {
                <app-button (click)="onReport(show)" [icon]="faReport">
                  Melden
                </app-button>
              }
              @if (!show.published) {
                <app-button (click)="onChange(show.id)" [icon]="faSliders">
                  Ändern
                </app-button>
              }
            </ng-container>
          </ng-container>
          <app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
            Herunterladen
          </app-button>
          <mat-menu #menu="matMenu">
            <app-button (click)="onDownload()" [icon]="faUser">
              Ablauf für Lobpreisgruppe
            </app-button>
            <app-button (click)="onDownloadHandout()" [icon]="faUsers">
              Handout mit Copyright Infos
            </app-button>
          </mat-menu>
        </app-button-row>
      }
    </app-card>
  </div>
}