<div class="customer-search-result-container">
  <div class="filter-mode-switcher">
    <lib-small-double-choice-switch
      leftValue="Filtern nach"
      rightValue="Treffer ohne"
      (switch)="changeSelectedFilterMode($event)"
      [selectedSide]="selectedFilterMode"
    ></lib-small-double-choice-switch>
  </div>
  <div class="filters" *ngIf="ds">
    <app-checkbox
      [option]="{
        value: 'Gastkunde',
        disabled: false,
        selected: filters.guestaccount !== undefined
      }"
      [negative]="selectedFilterMode === 1"
      (valueChanges)="updateFilter($event, 'guestaccount')"
    ></app-checkbox>
    <app-checkbox
      [option]="{
        value: 'Kundenkarte',
        disabled: false,
        selected: filters.bonuscard !== undefined
      }"
      [negative]="selectedFilterMode === 1"
      (valueChanges)="updateFilter($event, 'bonuscard')"
    ></app-checkbox>
    <app-checkbox
      [option]="{
        value: 'Onlinekonto',
        disabled: false,
        selected: filters.onlineshop !== undefined
      }"
      [negative]="selectedFilterMode === 1"
      (valueChanges)="updateFilter($event, 'onlineshop')"
    ></app-checkbox>
  </div>
  <app-loading
    *ngIf="!ds || ds.firstLoad"
    [style.marginTop.px]="60"
    [style.marginBottom.px]="60"
    loading="true"
    text="Inhalte werden geladen"
  ></app-loading>
  <div *ngIf="ds && !ds.loading && ds.cachedData.length === 0" class="note">
    <div class="new-customer-container">
      <span>
        Kunde nicht gefunden?
      </span>
      <app-button (action)="redirectToCustomerCreate()">Neue Kundendaten erfassen</app-button>
    </div>
  </div>
  <cdk-virtual-scroll-viewport itemSize="144" #viewport [perfectScrollbar]="{ minScrollbarLength: 20 }">
    <div *cdkVirtualFor="let customer of ds; let i = index; let last = last" class="virtual-item">
      <div class="user">
        <div class="user-info-container" *ngIf="customer != null; else loadingComponent" (click)="details(customer, i)">
          <div class="info">
            <div class="user-info">
              <div class="name-created-date">
                <h1 class="user-title">{{ customer.first_name }} {{ customer.last_name }}</h1>
                <span>{{ customer.created | date: 'dd.MM.yy' }}</span>
              </div>
              <div class="user-location">
                <span class="user-label">PLZ und Wohnort</span>
                <span class="user-data">{{ getCustomerDeliveryAddress(customer) }}</span>
              </div>
              <div class="user-email">
                <span class="user-label">E-Mail</span>
                <span class="user-data">{{ customer.email }}</span>
              </div>
            </div>
            <div
              class="user-actions"
              [ngClass]="{
                'additional-visible': customer.customer_card || customer.shop || customer.newsletter || customer.tolino
              }"
            ></div>
          </div>
          <div class="additional">
            <ng-container>
              <div class="data" *ngFor="let features of customer.features">
                <lib-icon name="Check_2" alt="check" height="11px" width="15px" pr="5px"></lib-icon>
                <span>{{ features.description }}</span>
              </div>
            </ng-container>
          </div>
        </div>
        <ng-template matTabContent #loadingComponent>
          <div class="user-info-empty">
            <div class="info">
              <div class="user-info">
                <h1 class="user-title">title</h1>
                <div class="user-location">
                  <span>PLZ und Wohnort</span>
                  <span></span>
                </div>
                <div class="user-email">
                  <span>E-Mail</span>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </div>
      <div class="note" *ngIf="last">
        <span class="note-text">
          Hinweis: Aus Datenschutzgründen werden nur Teilinformationen dargestellt. Tab auf einen Kunden um mehr zu erfahren.
        </span>
        <div class="new-customer-container">
          <span>
            Kunde nicht gefunden?
          </span>
          <app-button (action)="redirectToCustomerCreate()">Neue Kundendaten erfassen</app-button>
        </div>
      </div>
    </div>
  </cdk-virtual-scroll-viewport>
</div>
