<div mat-dialog-content>
  <p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt
    dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
  <p>
    Die Meldung erfolgt über
    <a [href]="reportingUrl" rel="noreferrer" target="_blank">{{ reportingUrl }}</a>.
  </p>

  <div class="song-list">
    <div class="list-head">
      <div>Titel</div>
      <div>CCLI-Nummer</div>
    </div>

    @for (song of data.songs; track song.title + song.ccliNumber) {
      <div class="list-item">
        <div>{{ song.title }}</div>
        <div class="number-cell">
          <span>{{ song.ccliNumber }}</span>
          <a
            (click)="markOpened(song.ccliNumber)"
            [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
            [href]="getSongReportingUrl(song.ccliNumber)"
            rel="noreferrer"
            target="_blank"
            class="btn-icon report-link"
          >
            <fa-icon [icon]="faOpen"></fa-icon>
          </a>
          @if (wasOpened(song.ccliNumber)) {
            <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
          }
        </div>
      </div>
    }
  </div>
</div>
<app-button-row>
  <app-button (click)="dialogRef.close(false)" [icon]="faClose">Abbrechen</app-button>
  <app-button (click)="dialogRef.close(true)" [icon]="faReport">Alle CCLI-Titel wurden gemeldet</app-button>
</app-button-row>
