<div class="flex flex-col gap-[24px] px-4">
  @if (transactions()?.length) {
    <div class="flex flex-row items-center">
      <h2 class="isa-text-body-1-bold text-isa-neutral-900">
        Letzte Transaktionen des Kunden
      </h2>

      <ui-icon-button
        class="transparent-icon-button"
        (click)="refresh()"
        name="isaActionRefresh"
        color="tertiary"
        [pending]="isLoading()"
        [disabled]="isLoading()"
      >
      </ui-icon-button>
    </div>
  }

  @if (isLoading()) {
    <div class="text-isa-neutral-500 text-sm">Lade Transaktionen...</div>
    <div class="h-[100rem]"></div>
  } @else if (error()) {
    <div class="text-isa-accent-red text-sm">
      Fehler beim Laden der Transaktionen
    </div>
  } @else if (!transactions()?.length) {
    <ui-empty-state
      class="self-center"
      title="Keine Transaktionen"
      description="Für diese Kundenkarte wurden noch keine Transaktionen erfasst"
      appearance="noResults"
    />
  } @else {
    <table cdk-table [dataSource]="dataSource()" [trackBy]="trackByDate">
      <!-- Date -->
      <ng-container cdkColumnDef="date">
        <th cdk-header-cell *cdkHeaderCellDef class="text-left">Datum</th>
        <td cdk-cell *cdkCellDef="let t" class="text-xs">
          {{ t.date | date: 'dd.MM.yyyy' }}
          <span class="text-isa-neutral-500">{{
            t.date | date: 'HH:mm.ss'
          }}</span>
        </td>
      </ng-container>

      <!-- Type -->
      <ng-container cdkColumnDef="reason">
        <th cdk-header-cell *cdkHeaderCellDef class="text-left">Buchungsart</th>
        <td cdk-cell *cdkCellDef="let t" class="text-xs">
          {{ t.reason || '-' }}
        </td>
      </ng-container>

      <!-- Amount -->
      <ng-container cdkColumnDef="amount">
        <th cdk-header-cell *cdkHeaderCellDef class="text-right">Umsatz</th>
        <td cdk-cell *cdkCellDef="let t" class="text-xs text-right">
          @if (t.type === 'BURN' && t.amount >= 0) {
            -
          }
          {{
            t.amount
              ? (t.amount || 0 | number: '1.2-2' : 'de-DE') + ' EUR'
              : '-'
          }}
        </td>
      </ng-container>

      <!-- Reference -->
      <ng-container cdkColumnDef="reference">
        <th cdk-header-cell *cdkHeaderCellDef class="text-right">Bon-Nummer</th>
        <td cdk-cell *cdkCellDef="let t" class="text-xs text-right">
          {{ t.reference || '-' }}
        </td>
      </ng-container>

      <!-- Points -->
      <ng-container cdkColumnDef="points">
        <th cdk-header-cell *cdkHeaderCellDef class="text-right">Lesepunkte</th>
        <td cdk-cell *cdkCellDef="let t" class="text-xs text-right">
          @if (t.type === 'EARN') {
            <span class="text-isa-accent-green inline-flex items-center gap-1">
              {{ t.points }}
              <ng-icon name="isaActionPolygonUp" size="0.75rem" />
            </span>
          } @else if (t.type === 'BURN') {
            <span class="text-isa-accent-red inline-flex items-center gap-1">
              @if (t.points >= 0) {
                -{{ t.points }}
              } @else {
                {{ t.points }}
              }
              <ng-icon name="isaActionPolygonDown" size="0.75rem" />
            </span>
          } @else {
            {{ t.points }}
          }
        </td>
      </ng-container>

      <!-- Header Row -->
      <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>

      <!-- Data Rows -->
      <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
    </table>
  }
</div>
