<div *ngIf="isOpen" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed">
  <div class="modal-card" [@cardAnimation]>
    <button
      type="button"
      (click)="closeDialog()"
      class="absolute top-2 right-2 text-text-secondary"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
        <path
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M18 6L6 18M6 6l12 12"
        />
      </svg>
    </button>
    <h2 class="modal-heading mb-0">Transaktionen</h2>
    <p class="pb-1 text-text-secondary mb-4">Hier siehst du alle vergangenen Einzahlungen</p>
    @for (transaction of (transactionData$ | async)?.transactions; track null) {
      <div class="flex justify-between items-center mb-4">
        <div>
          <p class="text-sm font-medium">{{ transaction.status }}</p>
          <p class="text-xs text-text-secondary">{{ transaction.createdAt | date: 'd.m.y H:m' }}</p>
        </div>
        <span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
          {{ transaction.amount | currency: 'EUR' }}
        </span>
      </div>
    } @empty {
      <div class="flex justify-center items-center w-full h-32">
        <div
          class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full border-gray-300 border-t-gree-600"
          role="status"
        >
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    }
    <div class="inline inline-flex w-full gap-2">
      <button
        type="button"
        (click)="back()"
        class="button-primary w-full py-2"
        [disabled]="offset <= 0"
      >
        <
      </button>
      <button
        type="button"
        (click)="forward()"
        class="button-primary w-full py-2"
        [disabled]="!(transactionData$ | async)?.hasMore"
      >
        >
      </button>
    </div>
  </div>
</div>
