<div
  class="wrapper text-center"
  [@cardFlip]="state"
  (@cardFlip.done)="flipAnimationDone($event)"
>
  @if (cardDetails) {
    <div class="card-main">
      <div class="icons text-brand">
        @if (isCustomerCard && frontside) {
          <button class="icon-barcode" (click)="flipCard()">
            <shared-icon [size]="35" icon="barcode-scanner"></shared-icon>
          </button>
        }
        @if (isCustomerCard && !frontside) {
          <button class="icon-back" (click)="flipCard()">
            <shared-icon [size]="35" icon="refresh"></shared-icon>
          </button>
        }
        <!-- <div *ngIf="!isCustomerCard" class="icon-delete"><ui-icon (click)="onDeletePartnerCard()" size="25px" icon="trash"></ui-icon></div> -->
      </div>
      <div class="headline">
        @if (isCustomerCard && frontside) {
          <p>Ihre Lesepunkte</p>
        }
        @if (isCustomerCard && !frontside) {
          <p>Kartennummer</p>
        }
        @if (!isCustomerCard) {
          <p>Partnerkartennummer</p>
        }
      </div>
      <div class="mt-2">
        @if (!isCustomerCard || (isCustomerCard && !frontside)) {
          <div class="card-number">{{ cardDetails.code }}</div>
        }
        @if (isCustomerCard && frontside) {
          <div class="points">{{ cardDetails.totalPoints | number }}</div>
        }
      </div>
      <div class="barcode-button">
        @if (!isCustomerCard || (isCustomerCard && !frontside)) {
          <div class="barcode-field">
            <img
              class="barcode"
              src="/assets/images/barcode.png"
              alt="Barcode"
            />
          </div>
        }
        @if (isCustomerCard && frontside) {
          <div>
            <button class="button" (click)="navigateToReward()">
              Zum Prämienshop
            </button>
          </div>
        }
      </div>
    </div>
  }
  <div class="card-bottom">
    @if (!isCustomerCard || (isCustomerCard && !frontside)) {
      <div class="customer-name">
        <p>{{ cardDetails.firstName }} {{ cardDetails.lastName }}</p>
      </div>
    }
    @if (isCustomerCard && frontside) {
      <div class="logo ml-2">
        <img
          class="logo-picture"
          src="/assets/images/Hugendubel_Logo.png"
          alt="Hugendubel Logo"
        />
      </div>
    }
  </div>
</div>
