<ng-container *ngIf="customer$ | async; let customer">
  <a [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id, 'orders']" class="card-customer-orders">
    <span class="title">Bestellungen</span>
  </a>
  <a
    *ngIf="hasCustomerCard$ | async"
    [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id, 'card']"
    class="card-customer-card"
  >
    <span class="title">Kundenkarte</span>
  </a>
  <div class="card-customer-details">
    <div class="header-container">
      <h1 class="title">{{ (customerType$ | async) === 'b2b' ? 'Firmendetails' : 'Kundendetails' }}</h1>
      <button (click)="openHistory()" class="button-customer-history">
        Historie
      </button>
    </div>
    <p class="info">Sind Ihre {{ (customerType$ | async) === 'b2b' ? 'Firmendaten' : 'Kundendaten' }} korrekt?</p>
    <div class="tags">
      <div class="tag" *ngFor="let feature of customerFeatures$ | async">
        <ui-icon icon="check" size="15px"></ui-icon>
        {{ feature.description }}
      </div>
    </div>
    <div class="details">
      <div class="detail">
        <span class="name">Erstellungsdatum</span>
        <span class="value">{{ customer.created | date: 'dd.MM.yy | HH:mm' }} Uhr</span>
      </div>
      <div class="detail">
        <span class="name">Kundennummer</span>
        <span class="value">{{ customer.customerNumber }}</span>
        <div class="grow"></div>
        <a
          [routerLink]="['/kunde', application.activatedProcessId, 'customer', customerId$ | async, 'edit', 'b2c']"
          class="edit-details"
          *ngIf="(canEdit$ | async) && (isB2b$ | async) === false && !customer?.linkedRecords?.length"
          >Bearbeiten</a
        >
      </div>
      <div class="detail" *ngFor="let records of customer?.linkedRecords; let last = last">
        <span class="name">Kundennummer-{{ records?.repository | uppercase }}</span>
        <span class="value">{{ records?.number }}</span>
        <div class="grow"></div>
        <a
          [routerLink]="[
            '/kunde',
            application.activatedProcessId,
            'customer',
            customerId$ | async,
            'edit',
            (isB2b$ | async) ? 'b2b' : 'b2c'
          ]"
          class="edit-details"
          *ngIf="last && (canEdit$ | async)"
          >Bearbeiten</a
        >
      </div>
    </div>
  </div>

  <ng-container [ngSwitch]="isB2b$ | async">
    <page-customer-data-b2b *ngSwitchCase="true" [customer]="customer" [customerType]="customerType$ | async"></page-customer-data-b2b>
    <page-customer-data-b2c *ngSwitchCase="false" [customer]="customer" [customerType]="customerType$ | async"></page-customer-data-b2c>
  </ng-container>

  <div class="address-wrapper">
    <div class="card-section-title">
      <h3>Rechnungsadresse</h3>
      <a
        *ngIf="(isB2b$ | async) === false && (canAdd$ | async) === true"
        class="button-add-address"
        [routerLink]="['/kunde', application.activatedProcessId, 'customer', customerId$ | async, 'payer', 'create', 'b2c']"
        >Hinzufügen</a
      >
    </div>
    <ng-container [ngSwitch]="isB2b$ | async">
      <div *ngSwitchCase="true" class="address-row">
        <span> {{ customer | address }} </span>
        <a
          *ngIf="canEdit$ | async"
          class="button-edit-address"
          [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id, 'edit', 'b2b']"
          >Bearbeiten</a
        >
      </div>
      <ng-container *ngSwitchDefault>
        <ng-container *ngIf="assignedPayers$ | async; let assignedPayers">
          <ui-radio-group *ngIf="(customer | address) || assignedPayers.length" class="card-customer-address" [(ngModel)]="selectedPayer">
            <div *ngIf="(isWebshopOrGuest$ | async) === false && customer | address as defaultPayerAddress" class="address-row">
              <ui-radio-button>{{ defaultPayerAddress }}</ui-radio-button>
              <a
                *ngIf="canEdit$ | async"
                class="button-edit-address"
                [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id, 'edit', 'b2c']"
                >Bearbeiten</a
              >
            </div>
            <div *ngFor="let payer of assignedPayers" class="address-row">
              <ui-radio-button [value]="payer?.payer?.id">
                {{ payer?.payer?.data | address }}
              </ui-radio-button>
              <a
                *ngIf="canEdit$ | async"
                class="button-edit-address"
                [routerLink]="[
                  '/kunde',
                  application.activatedProcessId,
                  'customer',
                  customer?.id,
                  'payer',
                  payer?.payer?.id,
                  'edit',
                  'b2c'
                ]"
                >Bearbeiten</a
              >
            </div>
          </ui-radio-group>
        </ng-container>
      </ng-container>
    </ng-container>

    <div class="card-section-title">
      <h3>Lieferadresse</h3>
      <a
        *ngIf="(canAdd$ | async) === true"
        class="button-add-address"
        [routerLink]="[
          '/kunde',
          application.activatedProcessId,
          'customer',
          customerId$ | async,
          'shipping',
          'create',
          (isB2b$ | async) ? 'b2b' : 'b2c'
        ]"
        >Hinzufügen</a
      >
    </div>

    <ui-radio-group
      *ngIf="(customer | address) || customer.shippingAddresses?.length"
      class="card-customer-address"
      [(ngModel)]="selectedAddress"
    >
      <div *ngIf="(isWebshopOrGuest$ | async) === false && customer | address as defaultShippingAddress" class="address-row">
        <ui-radio-button>{{ defaultShippingAddress }}</ui-radio-button>
        <a
          *ngIf="canEdit$ | async"
          class="button-edit-address"
          [routerLink]="['/kunde', application.activatedProcessId, 'customer', customer?.id, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
          >Bearbeiten</a
        >
      </div>
      <div *ngFor="let address of shippingAddresses$ | async" class="address-row">
        <ui-radio-button [value]="address?.id">
          {{ address | address }}
        </ui-radio-button>
        <a
          *ngIf="canEdit$ | async"
          class="button-edit-address"
          [routerLink]="[
            '/kunde',
            application.activatedProcessId,
            'customer',
            customer?.id,
            'shipping',
            address?.id,
            'edit',
            (isB2b$ | async) ? 'b2b' : 'b2c'
          ]"
          >Bearbeiten</a
        >
      </div>
    </ui-radio-group>
  </div>

  <div class="card-customer-footer">
    <button *ngIf="cartExists$ | async; else cartEmpty" class="cta-to-cart" (click)="continue()" [disabled]="continueDisabled$ | async">
      <ui-spinner [show]="showSpinner">
        Weiter zum Warenkorb
      </ui-spinner>
    </button>
    <ng-template #cartEmpty>
      <button class="cta-to-cart" (click)="continue()" [disabled]="continueDisabled$ | async">
        <ui-spinner [show]="showSpinner">
          Weiter zur Artikelsuche
        </ui-spinner>
      </button>
    </ng-template>
  </div>
</ng-container>
