<div *ngIf="show$ | async as show">
  <app-card
    closeLink="../"
    heading="{{ show.showType | showType }}, {{
      show.date.toDate() | date: 'dd.MM.yyyy'
    }} - {{ getStatus(show) }}"
  >
    <i>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
      <app-user-name [userId]="show.owner"></app-user-name>
    </i>
    <p *ngIf="!show.published">
      <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
    </p>
    <div *ngIf="showSongs" class="song-list" cdkDropList [cdkDropListDisabled]="show.published"
         (cdkDropListDropped)="drop($event, show)">
      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
        <app-song
          [showSong]="song"
          [showId]="showId"
          [showText]="showText"
          [show]="show"
          [index]="i"
        ></app-song>
      </div>
    </div>

    <app-add-song
      *ngIf="songs && !show.published"
      [show]="show"
      [showSongs]="showSongs"
      [songs]="songs"
    ></app-add-song>

    <app-button-row>
      <ng-container *appRole="['leader']">
        <ng-container *appOwner="show.owner">
          <app-button
            (click)="onArchive(true)"
            *ngIf="!show.archived"
            [icon]="faBox"
          >
            Archivieren
          </app-button>
          <app-button
            (click)="onArchive(false)"
            *ngIf="show.archived"
            [icon]="faBoxOpen"
          >
            Wiederherstellen
          </app-button>
          <app-button
            (click)="onPublish(true)"
            *ngIf="!show.published"
            [icon]="faPublish"
          >
            Veröffentlichen
          </app-button>
          <app-button
            (click)="onPublish(false)"
            *ngIf="show.published"
            [icon]="faUnpublish"
          >
            Veröffentlichung zurückziehen
          </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>
