@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="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>
}