<app-page-frame title="Präsentation" [withMenu]="false">
  @if (shows$ | async; as shows) {
    <div @fade content>
      @if (visible) {
        <app-card heading="Bitte eine Veranstaltung auswählen">
          @if (!shows.length) {
            <p>Es ist derzeit keine Veranstaltung vorhanden</p>
          }
          @if (shows.length > 0) {
            <div class="list">
              @for (show of shows; track show.id) {
                <app-button (click)="selectShow(show)" class="full-width">
                  <app-user-name [userId]="show.owner"></app-user-name>
                  , {{ show.showType | showType }}, {{ show.date.toDate() | date: "dd.MM.yyyy" }}
                </app-button>

              }
            </div>
          }
        </app-card>
      }
    </div>
  }
</app-page-frame>
