fix linting

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.html

@@ -3,7 +3,5 @@
 </div>
 <div mat-dialog-actions>
   <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
-    Archivieren
-  </button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Archivieren</button>
 </div>

src/app/modules/shows/dialog/report-dialog/report-dialog.component.html

@@ -1,7 +1,5 @@
 <div mat-dialog-content>
-  <p>
-    Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.
-  </p>
+  <p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
   <p>
     Die Meldung erfolgt über
     <a [href]="reportingUrl" rel="noreferrer" target="_blank">{{ reportingUrl }}</a>.
@@ -14,31 +12,29 @@
     </div>
 
     @for (song of data.songs; track song.title + song.ccliNumber) {
-        <div class="list-item">
-          <div>{{ song.title }}</div>
-          <div class="number-cell">
-            <span>{{ song.ccliNumber }}</span>
-            <a
-              (click)="markOpened(song.ccliNumber)"
-              [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
-              [href]="getSongReportingUrl(song.ccliNumber)"
-              rel="noreferrer"
-              target="_blank"
-              class="btn-icon report-link"
-            >
-              <fa-icon [icon]="faOpen"></fa-icon>
-            </a>
-            @if (wasOpened(song.ccliNumber)) {
-              <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
-            }
-          </div>
-        </div>
-      }
+    <div class="list-item">
+      <div>{{ song.title }}</div>
+      <div class="number-cell">
+        <span>{{ song.ccliNumber }}</span>
+        <a
+          (click)="markOpened(song.ccliNumber)"
+          [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
+          [href]="getSongReportingUrl(song.ccliNumber)"
+          rel="noreferrer"
+          target="_blank"
+          class="btn-icon report-link"
+        >
+          <fa-icon [icon]="faOpen"></fa-icon>
+        </a>
+        @if (wasOpened(song.ccliNumber)) {
+        <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
+        }
+      </div>
+    </div>
+    }
   </div>
 </div>
 <div mat-dialog-actions>
   <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
-    Alle CCLI-Titel wurden gemeldet
-  </button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Alle CCLI-Titel wurden gemeldet</button>
 </div>

src/app/modules/shows/dialog/share-dialog/share-dialog.component.html

@@ -1,13 +1,8 @@
 <div mat-dialog-content>
   <a [href]="data.url">{{ data.url }}</a>
-  <div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode">
-  </div>
+  <div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode"></div>
 </div>
 <div mat-dialog-actions>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
-    Schließen
-  </button>
-  <button (click)="share()" mat-button>
-    Teilen
-  </button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Schließen</button>
+  <button (click)="share()" mat-button>Teilen</button>
 </div>

src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts

@@ -25,7 +25,7 @@ export class ShareDialogComponent {
     const data = this.data;
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
-    QRCode.toDataURL(data.url, {
+    void QRCode.toDataURL(data.url, {
       type: 'image/jpeg',
       quality: 0.92,
       width: 1280,

src/app/modules/shows/edit/edit.component.html

@@ -6,18 +6,12 @@
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
             @for (key of showTypePublic; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
           <mat-optgroup label="privat">
             @for (key of showTypePrivate; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
         </mat-select>

src/app/modules/shows/list/filter/filter.component.html

@@ -1,14 +1,10 @@
 <div [formGroup]="filterFormGroup">
-
   <div class="third">
     <mat-form-field appearance="outline">
       <mat-label>Zeitraum</mat-label>
       <mat-select formControlName="time">
         @for (time of times; track time) {
-          <mat-option [value]="time.key">{{
-            time.value
-            }}
-          </mat-option>
+        <mat-option [value]="time.key">{{ time.value }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -18,10 +14,7 @@
       <mat-select formControlName="owner">
         <mat-option value="">Alle</mat-option>
         @for (owner of owners; track owner) {
-          <mat-option [value]="owner.key">{{
-            owner.value
-            }}
-          </mat-option>
+        <mat-option [value]="owner.key">{{ owner.value }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -32,23 +25,16 @@
         <mat-option value="">Alle</mat-option>
         <mat-optgroup label="öffentlich">
           @for (key of showTypePublic; track key) {
-            <mat-option [value]="key">{{
-              key | showType
-              }}
-            </mat-option>
+          <mat-option [value]="key">{{ key | showType }} </mat-option>
           }
         </mat-optgroup>
         <mat-optgroup label="privat">
           @for (key of showTypePrivate; track key) {
-            <mat-option [value]="key">{{
-              key | showType
-              }}
-            </mat-option>
+          <mat-option [value]="key">{{ key | showType }} </mat-option>
           }
         </mat-optgroup>
       </mat-select>
     </mat-form-field>
-
   </div>
 
   <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>

src/app/modules/shows/list/list-item/list-item.component.html

@@ -1,14 +1,14 @@
 @if (show) {
-  <div class="list-item">
-    <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
-    <div>
-      <app-user-name [userId]="show.owner"></app-user-name>
-    </div>
-    <div>{{ show.showType | showType }}</div>
-    <div>
-      @if (showStatusBadge) {
-        <app-badge [type]="showStatusBadgeType">{{ showStatusBadge }}</app-badge>
-      }
-    </div>
+<div class="list-item">
+  <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
+  <div>
+    <app-user-name [userId]="show.owner"></app-user-name>
   </div>
+  <div>{{ show.showType | showType }}</div>
+  <div>
+    @if (showStatusBadge) {
+    <app-badge [type]="showStatusBadgeType">{{ showStatusBadge }}</app-badge>
+    }
+  </div>
+</div>
 }

src/app/modules/shows/list/list.component.html

@@ -2,43 +2,30 @@
   <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
   <app-list-header *appRole="['leader']">
     @if (shows$ | async; as shows) {
-      <app-filter [shows]="publicShows$ | async"></app-filter>
+    <app-filter [shows]="publicShows$ | async"></app-filter>
     }
   </app-list-header>
 
   <ng-container *appRole="['leader']">
-    @if (privateShows$ | async; as shows) {
-      @if (shows.length > 0) {
-        <app-card
-          [padding]="false"
-          heading="Meine Veranstaltungen"
-          >
-          @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
-            <app-list-item
-              [routerLink]="show.id"
-              [showStatusBadge]="show.published ? 'nicht gemeldet' : 'unveröffentlicht'"
-              [showStatusBadgeType]="show.published ? 'error' : 'none'"
-              [show]="show"
-            ></app-list-item>
-          }
-        </app-card>
+    @if (privateShows$ | async; as shows) { @if (shows.length > 0) {
+    <app-card [padding]="false" heading="Meine Veranstaltungen">
+      @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
+      <app-list-item
+        [routerLink]="show.id"
+        [showStatusBadge]="show.published ? 'nicht gemeldet' : 'unveröffentlicht'"
+        [showStatusBadgeType]="show.published ? 'error' : 'none'"
+        [show]="show"
+      ></app-list-item>
       }
-    }
+    </app-card>
+    } }
   </ng-container>
 
-  @if (publicShows$ | async; as shows) {
-    @if (shows.length > 0) {
-      <app-card
-        [padding]="false"
-        heading="Veröffentlichte Veranstaltungen"
-        >
-        @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
-          <app-list-item
-            [routerLink]="show.id"
-            [show]="show"
-          ></app-list-item>
-        }
-      </app-card>
+  @if (publicShows$ | async; as shows) { @if (shows.length > 0) {
+  <app-card [padding]="false" heading="Veröffentlichte Veranstaltungen">
+    @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
+    <app-list-item [routerLink]="show.id" [show]="show"></app-list-item>
     }
-  }
+  </app-card>
+  } }
 </div>

src/app/modules/shows/list/list.component.ts

@@ -34,11 +34,7 @@ export class ListComponent {
   public showType$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.showType));
   public shows$ = this.showService.list$();
   public privateShows$ = combineLatest([this.shows$, this.userService.user$]).pipe(
-    map(([shows, user]) =>
-      shows
-        .filter(show => show.owner === user?.id)
-        .filter(show => !show.published || show.reportedType === 'pending')
-    )
+    map(([shows, user]) => shows.filter(show => show.owner === user?.id).filter(show => !show.published || show.reportedType === 'pending'))
   );
   public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
   public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(

src/app/modules/shows/new/new.component.html

@@ -6,18 +6,12 @@
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
             @for (key of showTypePublic; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
           <mat-optgroup label="privat">
             @for (key of showTypePrivate; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
         </mat-select>

src/app/modules/shows/services/show.service.spec.ts

@@ -16,11 +16,9 @@ describe('ShowService', () => {
 
   beforeEach(async () => {
     user$ = new BehaviorSubject<unknown>({id: 'user-1'});
-    showDataServiceSpy = jasmine.createSpyObj<ShowDataService>(
-      'ShowDataService',
-      ['read$', 'listPublicSince$', 'update', 'add'],
-      {list$: of(shows) as unknown as ShowDataService['list$']}
-    );
+    showDataServiceSpy = jasmine.createSpyObj<ShowDataService>('ShowDataService', ['read$', 'listPublicSince$', 'update', 'add'], {
+      list$: of(shows) as unknown as ShowDataService['list$'],
+    });
     showDataServiceSpy.read$.and.returnValue(of(shows[0]));
     showDataServiceSpy.listPublicSince$.and.returnValue(of([shows[1]]));
     showDataServiceSpy.update.and.resolveTo();

src/app/modules/shows/show/show.component.html

@@ -1,148 +1,110 @@
 @if (show$ | async; as show) {
-  <div>
-    <app-card
-      [fullscreen]="useSwiper"
-      closeLink="../"
+<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) {
+    <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>
       }
-      @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>
+    </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>
       }
-    </app-card>
-  </div>
+    </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>
 }

src/app/modules/shows/show/show.component.ts

@@ -188,9 +188,12 @@ export class ShowComponent implements OnInit, OnDestroy {
         width: '350px',
       });
 
-      dialogRef.afterClosed().pipe(take(1)).subscribe((archive: boolean) => {
-        if (archive && this.showId != null) void this.setArchiveState(true);
-      });
+      dialogRef
+        .afterClosed()
+        .pipe(take(1))
+        .subscribe((archive: boolean) => {
+          if (archive && this.showId != null) void this.setArchiveState(true);
+        });
     }
   }
 
@@ -230,11 +233,14 @@ export class ShowComponent implements OnInit, OnDestroy {
       data: {songs},
     });
 
-    dialogRef.afterClosed().pipe(take(1)).subscribe((reported: boolean) => {
-      if (reported) {
-        void this.showService.update$(show.id, {reportedType: 'reported'});
-      }
-    });
+    dialogRef
+      .afterClosed()
+      .pipe(take(1))
+      .subscribe((reported: boolean) => {
+        if (reported) {
+          void this.showService.update$(show.id, {reportedType: 'reported'});
+        }
+      });
   }
 
   public getStatus(show: Show): string {

src/app/modules/shows/show/song/song.component.html

@@ -1,113 +1,81 @@
 @if (iSong && iSong && show) {
-  <div>
-    @if (show.published || fullscreen) {
-      <div class="title published">
-        <div class="key">{{ iSong.key }}</div>
-        <div>{{ iSong.title }}</div>
+<div>
+  @if (show.published || fullscreen) {
+  <div class="title published">
+    <div class="key">{{ iSong.key }}</div>
+    <div>{{ iSong.title }}</div>
+  </div>
+  } @if (!show.published && !fullscreen) {
+  <div class="song" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle && !edit">
+    @if (dragHandle && !edit) {
+    <button aria-label="Lied verschieben" cdkDragHandle class="drag-handle" type="button"></button>
+    }
+    <span class="title">{{ iSong.title }}</span>
+    @if (!edit) {
+    <div class="keys-container">
+      <div (click)="openKeySelect()" class="keys">
+        @if (iSong.keyOriginal !== iSong.key) {
+        <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
+        }
+        <span>{{ iSong.key }}</span>
       </div>
-    }
-    @if (!show.published && !fullscreen) {
-      <div
-        class="song"
-        [class.show-text-layout]="!!showText"
-        [class.compact-layout]="!showText"
-        [class.with-drag]="dragHandle && !edit"
-      >
-        @if (dragHandle && !edit) {
-          <button
-            aria-label="Lied verschieben"
-            cdkDragHandle
-            class="drag-handle"
-            type="button"
-          ></button>
-        }
-        <span class="title">{{ iSong.title }}</span>
-        @if (!edit) {
-          <div class="keys-container">
-            <div (click)="openKeySelect()" class="keys">
-              @if (iSong.keyOriginal !== iSong.key) {
-                <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-              }
-              <span>{{ iSong.key }}</span>
-            </div>
-          </div>
-        }
-        @if (!edit) {
-          <app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
-                           matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
-        }
-        @if (!edit) {
-          <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
-                           matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
-        }
-      </div>
-      @if (!edit) {
-        <div
-          aria-hidden="true"
-          class="song select"
-          [class.show-text-layout]="!!showText"
-          [class.compact-layout]="!showText"
-          [class.with-drag]="dragHandle"
-        >
-          @if (dragHandle) {
-            <span class="drag-handle-placeholder"></span>
-          }
-          @if (!showText) {
-            <span class="keys">
-              <mat-form-field class="keys-select">
-                <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
-                  @for (key of keys; track key) {
-                    <mat-option [value]="key">{{ key }}</mat-option>
-                  }
-                </mat-select>
-              </mat-form-field>
-            </span>
-            <span class="title"></span>
-          } @else {
-            <span class="title"></span>
-            <span class="keys">
-              <mat-form-field class="keys-select">
-                <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
-                  @for (key of keys; track key) {
-                    <mat-option [value]="key">{{ key }}</mat-option>
-                  }
-                </mat-select>
-              </mat-form-field>
-            </span>
-          }
-          <span class="btn-edit"></span>
-          <span class="btn-delete"></span>
-        </div>
-      }
-    }
-    @if (edit) {
-      <mat-form-field appearance="outline">
-        <mat-label>Songtext</mat-label>
-        <textarea [cdkTextareaAutosize]="true"
-                  [formControl]="editSongControl"
-                  class="edit"
-                  matInput
-                  matTooltip="Tonart ändern"
-        ></textarea>
-      </mat-form-field>
-    }
-    @if (edit) {
-      <div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
-    }
-    @if (edit) {
-      <app-button-row>
-        <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
-        <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
-      </app-button-row>
-    }
-    @if (!edit && (showText)) {
-      <app-song-text
-        (chordModeChanged)="onChordModeChanged($event)"
-        [chordMode]="iSong.chordMode"
-        [showSwitch]="!show.published"
-        [text]="iSong.text"
-        [transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
-      ></app-song-text>
+    </div>
+    } @if (!edit) {
+    <app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon" matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
+    } @if (!edit) {
+    <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon" matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
     }
   </div>
+  @if (!edit) {
+  <div aria-hidden="true" class="song select" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle">
+    @if (dragHandle) {
+    <span class="drag-handle-placeholder"></span>
+    } @if (!showText) {
+    <span class="keys">
+      <mat-form-field class="keys-select">
+        <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
+          @for (key of keys; track key) {
+          <mat-option [value]="key">{{ key }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </span>
+    <span class="title"></span>
+    } @else {
+    <span class="title"></span>
+    <span class="keys">
+      <mat-form-field class="keys-select">
+        <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
+          @for (key of keys; track key) {
+          <mat-option [value]="key">{{ key }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </span>
+    }
+    <span class="btn-edit"></span>
+    <span class="btn-delete"></span>
+  </div>
+  } } @if (edit) {
+  <mat-form-field appearance="outline">
+    <mat-label>Songtext</mat-label>
+    <textarea [cdkTextareaAutosize]="true" [formControl]="editSongControl" class="edit" matInput matTooltip="Tonart ändern"></textarea>
+  </mat-form-field>
+  } @if (edit) {
+  <div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
+  } @if (edit) {
+  <app-button-row>
+    <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
+    <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
+  </app-button-row>
+  } @if (!edit && (showText)) {
+  <app-song-text
+    (chordModeChanged)="onChordModeChanged($event)"
+    [chordMode]="iSong.chordMode"
+    [showSwitch]="!show.published"
+    [text]="iSong.text"
+    [transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
+  ></app-song-text>
+  }
+</div>
 }