<div class="options">
  <page-take-away-option-list></page-take-away-option-list>
  <page-pick-up-option-list></page-pick-up-option-list>
  <page-delivery-option-list></page-delivery-option-list>
</div>

<div class="items" *ngIf="shoppingCartItems$ | async; let shoppingCartItems">
  <div class="item-actions">
    <ng-container>
      <button
        *ngIf="!(allShoppingCartItemsSelected$ | async); else unselectAll"
        class="cta-select-all"
        [disabled]="selectAllCtaDisabled$ | async"
        (click)="selectAll(shoppingCartItems, true)"
      >
        Alle auswählen
      </button>

      <ng-template #unselectAll>
        <button class="cta-select-all" [disabled]="selectAllCtaDisabled$ | async" (click)="selectAll(shoppingCartItems, false)">
          Alle abwählen
        </button>
      </ng-template>
    </ng-container>

    <br />
    {{ (selectedShoppingCartItems$ | async)?.length || 0 }} von {{ shoppingCartItems?.length || 0 }} Artikeln
  </div>

  <div class="item-list scroll-bar" *ngIf="shoppingCartItems?.length > 0; else emptyMessage">
    <hr />
    <ng-container *ngFor="let item of shoppingCartItems">
      <page-purchasing-options-list-item [item]="item"></page-purchasing-options-list-item>
      <hr />
    </ng-container>
  </div>

  <ng-template #emptyMessage>
    <div class="empty-message">Keine Artikel für die ausgewählte Kaufoption verfügbar</div>
  </ng-template>
</div>

<div class="actions">
  <button class="cta-apply" [disabled]="applyCtaDisabled$ | async" (click)="apply()">
    <ui-spinner [show]="addItemsLoader$ | async">
      Übernehmen
    </ui-spinner>
  </button>
</div>
