<div class="split">
  <app-card
    *ngIf="song$ | async as song"
    [heading]="song.number + ' - ' + song.title"
    closeLink="../"
  >
    <div class="song">
      <div>
        <div *appRole="['leader', 'contributor']" class="detail">
          <div>Typ: {{ song.type | songType }}</div>
          <div>Tonart: {{ song.key }}</div>
          <div>Tempo: {{ song.tempo }}</div>
          <div>Status: {{ (song.status | status) || "entwurf" }}</div>
          <div *ngIf="song.legalOwner">
            Rechteinhaber: {{ song.legalOwner | legalOwner }}
          </div>
          <div *ngIf="song.legalOwnerId && song.legalOwner === 'CCLI'">
            <a
              href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}"
              target="_blank"
            >
              CCLI Nummer: {{ song.legalOwnerId }}
            </a>
          </div>
          <div *ngIf="song.legalOwnerId && song.legalOwner !== 'CCLI'">
            Rechteinhaber ID: {{ song.legalOwnerId }}
          </div>
          <div *ngIf="song.artist">Künstler: {{ song.artist }}</div>
          <div *ngIf="song.label">Verlag: {{ song.label }}</div>
          <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
          <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
        </div>
      </div>

      <!-- <div class="text">{{song.text}}</div>-->
      <app-song-text
        *ngIf="user$ | async as user"
        [chordMode]="user.chordMode"
        [showSwitch]="true"
        [text]="song.text"
      ></app-song-text>

      <mat-chip-list
        *appRole="['leader', 'contributor']"
        aria-label="Attribute"
      >
        <mat-chip *ngFor="let flag of getFlags(song.flags)">{{
          flag
          }}</mat-chip>
      </mat-chip-list>

      <div *appRole="['leader', 'contributor']" class="text">
        {{ song.comment }}
      </div>
    </div>

    <app-button-row>
      <app-button
        (click)="onDelete(song.id)"
        *appRole="['admin']"
        [icon]="faDelete"
      >Löschen
      </app-button>
      <app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit"
      >Bearbeiten
      </app-button>
    </app-button-row>
  </app-card>
  <ng-container *ngIf="files$ | async as files">
    <app-card *ngIf="files.length > 0" heading="Anhänge">
      <p *ngFor="let file of files$ | async">
        <app-file [file]="file"></app-file>
      </p>
    </app-card>
  </ng-container>
</div>
