<div class="customer-loyalty-container" [@shrinkMainCard]="expanded">
  <div class="" [@shrinkTitle]="expanded" (click)="!expanded && expand()">Kundenkarte</div>

  <div class="placeholder">
    <div class="description">
      <span>Alle Infos zu Ihrer Kundenkarte und allen Partnerkarten.</span>
    </div>
    <div class="personal-cards" *ngIf="personalCards && personalCards.length > 0">
      <div
        class="container-flip-card"
        *ngFor="let card of personalCards; let first = first; let last = last; let i = index"
        [ngClass]="{ 'center-first-card': first, 'center-last-card': last && last !== first }"
      >
        <div class="card" [@flipState]="card.animate">
          <div class="front">
            <div class="card-content-front">
              <img src="/assets/images/scan.svg" alt="back side" class="icon" (click)="flipCard(i)" />
              <span class="card-title">Ihre Lesepunkte</span>
              <span class="card-points">{{ card.totalPoints }}</span>
              <app-button [disabled]="true" [primary]="true">Zum Prämienshop</app-button>
            </div>
            <div class="card-footer-front">
              <img src="/assets/images/Hugendubel_Logo.png" alt="logo" />
            </div>
          </div>
          <div class="back">
            <div class="card-content-back">
              <img src="/assets/images/Back_Icon.svg" alt="first side" class="icon" (click)="flipCard(i)" />
              <span class="card-title">Kartennummer</span>
              <span class="card-number">{{ card.code }}</span>
              <div class="barcode">
                <img src="/assets/images/barcode.png" alt="barcode" />
              </div>
            </div>
            <div class="card-footer-back">
              <span class="customer-name">{{ card.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span class="partner-title">Partnerkarten</span>
    <div class="partner-cards">
      <div
        class="customer-card-container parnter-card"
        *ngFor="let card of partnerCards; let first = first; let last = last; let i = index"
        [ngClass]="{ 'center-first-card': first }"
      >
        <div class="card">
          <div class="card-content">
            <img src="/assets/images/trash.svg" alt="delete" class="icon" (click)="deletePartnerCard()" />
            <span class="card-title">Partnerkartennummer</span>
            <span class="card-number">{{ card.code }}</span>
            <div class="barcode">
              <img src="/assets/images/barcode.png" alt="barcode" />
            </div>
          </div>
          <div class="card-footer">
            <span class="customer-name">{{ card.name }}</span>
          </div>
        </div>
      </div>
      <!-- <div class="parnter-card-add center-last-card" [ngClass]="{ 'center-first-card': partnerCards.length === 0 }">
        <div class="card">
          <div class="card-content">
            <app-button (action)="addParnterCard()" class="add-process-icon" [type]="'small'">
              <lib-icon width="34px" height="36px" name="add-red"></lib-icon>
            </app-button>
            <app-button (action)="addParnterCard()" class="add-process-button">Neue Partnerkarte</app-button>
          </div>
        </div>
      </div> -->
    </div>
    <div class="btn-container">
      <!-- <app-button (action)="deletePartnerCard()">Kundenkarte kündigen</app-button> -->
    </div>
  </div>
</div>

<!-- Animations has small bug on iPad, on pc works -->
<!-- <div class="recommendations" [@shrinkSecondary]="false">
  <div class="header" *ngIf="expanded">
    <img class="icon" src="/assets/images/Empfehlungen_Icon_blue.svg" />
    <span>Empfehlungen</span>
  </div>
  <app-recommendations></app-recommendations>
</div> -->
