@if (song) {
  <app-card [heading]="song.number + ' bearbeiten'" closeLink="../">
    <form [formGroup]="form" class="form">
      <mat-form-field appearance="outline">
        <mat-label>Titel</mat-label>
        <input formControlName="title" matInput />
      </mat-form-field>
      <div class="fourth">
        <mat-form-field appearance="outline">
          <mat-label>Typ</mat-label>
          <mat-select formControlName="type">
            @for (type of types; track type) {
              <mat-option [value]="type">{{
                type | songType
                }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Tonart</mat-label>
          <mat-select formControlName="key">
            @for (key of keys; track key) {
              <mat-option [value]="key">{{
                key | key
                }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Tempo</mat-label>
          <input formControlName="tempo" matInput />
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Status</mat-label>
          <mat-select formControlName="status">
            @for (status of status; track status) {
              <mat-option [value]="status">{{
                status | status
                }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>
      <mat-form-field appearance="outline">
        <mat-label>Songtext</mat-label>
        <textarea
          (focus)="songtextFocus = true"
          (focusout)="songtextFocus = false"
          [cdkTextareaAutosize]="true"
          formControlName="text"
          matInput
        ></textarea>
      </mat-form-field>
      @if (songtextFocus) {
        <div class="song-text-help">
          <h3>Vorschau</h3>
          <app-song-text [text]="form.value.text" chordMode="show"></app-song-text>
          <h3>Hinweise zur Bearbeitung</h3>
          <h4>Aufbau</h4>
          Der Liedtext wird hintereinander weg geschrieben. Dabei werden Strophen,
          Refrain und Bridge jeweils durch eine zusätzliche Zeile Markiert. z.B.
          <pre>
            Strophe
            Text der ersten Strophe
            Strophe
            Text der zweiten Strophe
            Refrain
            Und hier der Refrain
          </pre>
          <h3>Akkorde</h3>
          Die Akktorde werden jeweils in der Zeile über dem jeweiligen Liedtext
          geschrieben. Sie werden jeweils durch Leerzeichen an die entsprechende
          Position gebracht. Bitte keine Tabulatoren verwenden! Folgende
          Schreibweisen sind erlaubt:
          <pre>
            Dur: C  D  E
            Moll: c  d  e
            Kreuz/B-Tonarten: C#  f#  Eb  (Hb muss als B angegeben werden)
            Basstöne: C/E  D/C
            Obertöne: c7  E9  f#maj7
          </pre>
          Beispiel:
          <pre>
            Strophe
            e            C/E        H7    a     D    C/E   H7/E
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
            F#        B      Eb      Cmaj7    C9                   e
            sed diam nonumy eirmod tempor invidunt ut labore et dolore
          </pre>
        </div>
      }
      <mat-form-field appearance="outline">
        <mat-label>Kommentar</mat-label>
        <textarea
          [cdkTextareaAutosize]="true"
          formControlName="comment"
          matInput
        ></textarea>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-chip-grid #chipList>
          @for (flag of flags; track flag) {
            <mat-chip-row
              (removed)="removeFlag(flag)"
              [removable]="true"
              >
              {{ flag }}&nbsp;
              <fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
            </mat-chip-row>
          }
          <input
            (matChipInputTokenEnd)="addFlag($event)"
            [matChipInputAddOnBlur]="true"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            placeholder="Attribute"
            />
        </mat-chip-grid>
      </mat-form-field>
      <div class="half">
        <mat-form-field appearance="outline">
          <mat-label>Rechtlicher Status</mat-label>
          <mat-select formControlName="legalType">
            @for (key of legalType; track key) {
              <mat-option [value]="key">{{
                key | legalType
                }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Rechteinhaber</mat-label>
          <mat-select formControlName="legalOwner">
            @for (key of legalOwner; track key) {
              <mat-option [value]="key">{{
                key | legalOwner
                }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Rechteinhaber ID (z.B. CCLI Liednummer)</mat-label>
          <input formControlName="legalOwnerId" matInput />
          @if (form.value.legalOwner === 'CCLI') {
            <a
              class="link-ccli"
              href="https://songselect.ccli.com/Songs/{{ form.value.legalOwnerId }}"
              matSuffix
          matTooltip="CCLI Link: https://songselect.ccli.com/Songs/{{
            form.value.legalOwnerId
          }}"
              matTooltipPosition="before"
              target="_blank"
              >
              <fa-icon [icon]="faLink"></fa-icon>
            </a>
          }
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Künstler</mat-label>
          <input formControlName="artist" matInput />
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Verlag / Copyright</mat-label>
          <input formControlName="label" matInput />
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Nutzungsbedingungen</mat-label>
          <input formControlName="termsOfUse" matInput />
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>abweichende Quelle</mat-label>
          <input formControlName="origin" matInput />
        </mat-form-field>
      </div>
    </form>
    <app-button-row>
      <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
    </app-button-row>
  </app-card>
}