@if (loading) {
  <mat-spinner></mat-spinner>
} @else if (wish) {
  <div>
    <mat-card class="wish-card">
      <mat-card-header>
        <mat-card-title>{{ wish.title }}</mat-card-title>
        <mat-card-subtitle>Wunschdetails</mat-card-subtitle>
      </mat-card-header>

      <mat-card-content>
        <p><strong>Beschreibung:</strong><br><span [innerHTML]="safeDescription"></span></p>
        <p><strong>Zielbetrag:</strong> CHF {{ wish.targetAmount | number: '1.2-2' }}</p>
        <p><strong>Erreichter Betrag:</strong> CHF {{ wish.collectedAmount | number: '1.2-2' }}</p>

        @if (token) {
          <div class="slider-container" matTooltip="Bereits erreicht: {{ progress | number:'1.0-0' }}%">
            <span class="range-span">0%</span>
            <mat-progress-bar
              mode="determinate"
              [value]="progress">
            </mat-progress-bar>
            <span class="range-span">100%</span>
          </div>
        } @else {
          <form #donationForm="ngForm" (ngSubmit)="donate()" novalidate>
            <div class="slider-container">
              <span class="range-span">{{ min }}</span>
              <mat-slider
                [max]="max"
                [min]="min"
                [step]="1"
                [discrete]="true"
              >
                <input matSliderThumb [(ngModel)]="value" name="value" required [min]="min" [max]="max">
              </mat-slider>
              <span class="range-span">{{ max }}</span>
            </div>

            <mat-form-field appearance="fill">
              <mat-label>Betrag</mat-label>
              <input
                matInput
                type="number"
                name="value"
                [(ngModel)]="value"
                required
                [min]="min"
                [max]="max">
              @if (donationForm.controls['value'].invalid) {
                <mat-error>Gültiger Betrag erforderlich</mat-error>
              }
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Nachricht (optional)</mat-label>
              <textarea matInput name="note" [(ngModel)]="note" rows="3"></textarea>
            </mat-form-field>

            <button
              mat-raised-button
              color="primary"
              type="submit"
              [disabled]="!donationForm.valid">
              Spenden
            </button>
          </form>
        }
      </mat-card-content>

      <mat-card-actions align="end">
        <button mat-button (click)="goBack()">Zurück</button>
      </mat-card-actions>
    </mat-card>

    @if (token) {
      <div class="table-div">
        <h3>Beiträge</h3>
        @if (dataSource.data.length > 0) {
          <table mat-table matSort [dataSource]="dataSource">
            <ng-container matColumnDef="amount">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Betrag</th>
              <td mat-cell *matCellDef="let contribution">CHF {{ contribution.amount | number: '1.2-2' }}</td>
            </ng-container>
            <ng-container matColumnDef="message">
              <th mat-header-cell *matHeaderCellDef>Nachricht</th>
              <td mat-cell *matCellDef="let contribution">{{ contribution.message || '-' }}</td>
            </ng-container>
            <ng-container matColumnDef="createdAt">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Datum</th>
              <td mat-cell *matCellDef="let contribution">{{ contribution.createdAt | date:'dd.MM.yyyy HH:mm' }}</td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
          <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
        }
      </div>
    }
  </div>
} @else {
  <mat-spinner></mat-spinner>
}