@if (viewModel$ | async; as viewModel) {
  <app-page-frame title="Lieder" [menuBadge]="viewModel.filterActive">
    <div class="sidebar-content" sidebar>
      <app-filter [songs]="viewModel.songs"></app-filter>
    </div>
    <div content>
      <app-card [padding]="false">
        @if (viewModel.filterActive) {
          <div class="filter-active">
            <span>Filter aktiv: {{ viewModel.songs.length }} Lieder gefunden.</span>
            <button (click)="resetFilter()" class="filter-reset-link" type="button">Filter zurücksetzen</button>
          </div>
        }
        @for (song of viewModel.songs; track trackBy($index, song)) {
          <div [routerLink]="song.id" class="list-item">
            <div class="number">{{ song.number }}</div>
            <div class="title">
              <span>{{ song.title }}</span>
              @if (song.hasChordValidationIssues) {
                <span class="validation-star" title="Akkord-Validierungsfehler vorhanden">*</span>
              }
            </div>
            <div>
              <ng-container *appRole="['contributor']">
                @if (song.status === 'draft') {
                  <div class="warning">
                    <fa-icon [icon]="faDraft"></fa-icon>
                  </div>
                }
                @if (song.status === 'set') {
                  <div class="neutral">
                    <fa-icon [icon]="faDraft"></fa-icon>
                  </div>
                }
                @if (song.status === 'final') {
                  <div class="success">
                    <fa-icon [icon]="faFinal"></fa-icon>
                  </div>
                }
              </ng-container>
              @if (song.legalType === 'open') {
                <div class="warning">
                  <fa-icon [icon]="faLegal"></fa-icon>
                </div>
              }
            </div>
            <div>{{ song.key }}</div>
          </div>
        }
        <div *appRole="['contributor']" class="list-action">
          <app-button [fullWidth]="true" [icon]="faNewSong" routerLink="new">Neuen Song anlegen</app-button>
        </div>
      </app-card>
    </div>
  </app-page-frame>
}
