@if (shows$ | async; as shows) {
  <div @fade>
    @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) {
              <button (click)="selectShow(show)" mat-stroked-button>
                <app-user-name [userId]="show.owner"></app-user-name>
                ,
                {{ show.showType | showType }},
                {{ show.date.toDate() | date: "dd.MM.yyyy" }}
              </button>
            }
          </div>
        }
      </app-card>
    }
  </div>
}
