<app-modal id="pay-method-modal">
  <div class="pay-method-modal">
    <div class="header">
      <h1>Wie möchten Sie bezahlen um die Bestellung abzuschließen?</h1>
      <lib-icon (click)="closeModal()" height="21px" class="close-icon" name="close" alt="close"></lib-icon>
    </div>
    <div class="body">
      <div class="actions">
        <app-button [primary]="true">
          <div>
            <lib-icon
              name="Empfehlungen_Icon"
              alt="megafon"
              pr="5px"
              height="18px"
              width="26px;"
              color="#fff"
              [ngStyle]="{ height: '19px' }"
            ></lib-icon>
            <span>Kundenkarte anlegen</span>
          </div>
        </app-button>
        <app-button (action)="confirmOrder(billing)" *ngIf="delivery || (pickUp && delivery) || takeNow" #billing [load]="true"
          >Rechnung</app-button
        >
        <app-button (action)="confirmOrder(notice)" *ngIf="!delivery && !takeNow && pickUp" #notice [load]="true">Abholschein</app-button>
      </div>
      <div class="descriptions">
        <div>
          <span class="label">Exklusivität</span>
          <span class="text">Exklusive Angebote und Aktionen genießen</span>
        </div>
        <div>
          <span class="label">Lesepunkte</span>
          <span class="text">250 Lesepunkte beim jetzigen Einkauf einlösen</span>
        </div>
        <div>
          <span class="label">Ermäßigungen</span>
          <span class="text">Ermäßigter Eintritt bei Veranstaltungen</span>
        </div>
        <ng-container *ngIf="!toggleMore">
          <div>
            <span class="label">Überraschungen</span>
            <span class="text">Geburtstagsüberraschung per E-Mail</span>
          </div>
          <div>
            <span class="label">Prämien</span>
            <span class="text">Stetig wechselndes Prämienangebot</span>
          </div>
        </ng-container>

        <div class="more" (click)="more()">
          <span [ngClass]="{ 'more-label': toggleMore, 'less-label': !toggleMore }">{{
            toggleMore ? 'Weitere Vorteile' : 'Weniger Vorteile'
          }}</span>
          <lib-icon
            name="Arrow_Next-with-body"
            transition="all 0.2s linear"
            [rotateBackwards]="!toggleMore"
            [translateX]="!toggleMore ? '-155px' : null"
            [ngStyle]="{ height: '18px' }"
          ></lib-icon>
        </div>
      </div>
    </div>
  </div>
</app-modal>
