<div id="card-container" class="card-container" *ngIf="order" (scroll)="scrollHandler($event)">
  <div class="header" [ngClass]="{ ipad: isIPad }">
    <app-button class="align-right" (action)="editOrder()" type="small">Bearbeiten</app-button>
  </div>
  <div class="order-details">
    <div class="main">
      <span class="customer"> {{ order.buyer.firstName + ' ' + order.buyer.lastName }}</span>
      <span class="status"> </span>
      <span class="order">{{ order.orderNumber }}</span>
    </div>
    <div class="secondary">
      <div>
        <div class="grid first">
          <span class="label">Bestelldatum</span>
          <span class="data"> {{ order.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</span>
        </div>
        <div class="grid first">
          <span class="label">Bestellkanal</span>
          <span class="data"> {{ orderChannel }}</span>
        </div>
      </div>
      <div class="grid-wrapper">
        <div class="grid">
          <span class="label">Status</span>
          <div class="status-wrapper">
            <lib-icon *ngIf="isPositiveStatus" pr="5px" name="Check_branch"></lib-icon>
            <lib-icon *ngIf="isNegativeStatus" pr="5px" name="Icon_Close_branch"></lib-icon>
            <span class="data">
              {{ status }}
            </span>
          </div>
        </div>
        <div class="grid">
          <span class="label">vsl. Lieferdatum</span>
          <span class="pickup-data">
            <!-- <app-dropdown
              class="dropdown"
              [selected]="pickUpDate | date: 'dd.MM.yy'"
              [options]="pickUpDateOptions"
              (valueChanges)="pickUpDateSelected($event)"
            ></app-dropdown> -->
            <lib-date-picker
              [disabled]="isNegativeStatus"
              (changed)="updateEstimatedShippingDate($event)"
              [selected]="esitmatedShippingDate"
            ></lib-date-picker>
          </span>
        </div>
        <!-- <div class="grid" *ngIf="!arrived">
          <span class="label">Geändert</span>
          <span class="data" *ngIf="order.changed">
            <span>{{ order.changed | date: 'dd.MM.yy' }}</span>
          </span>
        </div> -->
      </div>
    </div>
  </div>
  <hr class="spacer branch" />
  <div class="items">
    <ng-container *ngFor="let item of order.items; index as i">
      <app-goods-in-article-details
        [article]="item.data"
        [paymentType]="paymentType"
        [paymentReferenceNumber]="order.paymentReferenceNumber"
        [clientChannel]="order.clientChannel"
        [targetBranch]="order.targetBranch"
        [logistician]="order.logistician"
        [expand]="expanded(i)"
        class="item"
      ></app-goods-in-article-details>
      <div class="history" [ngClass]="{ ipad: isIPad }">
        <app-button class="align-right" type="small">Historie</app-button>
      </div>
      <div class="multiple" *ngIf="order && order.items && order.items.length != 1">
        <ng-container *ngTemplateOutlet="readMoreButton; context: { $implicit: i }"></ng-container>
      </div>
      <div class="not-available-extras">
        <hr class="spacer branch" />
        <div class="row">
          <div class="data-container">
            <div class="label"><span>Anmerkung</span></div>
            <div class="data" [ngClass]="{ 'pt-1': notAvailableModel.comment.disabled, 'pl-1': notAvailableModel.comment.disabled }">
              <span *ngIf="notAvailableModel.comment.disabled">{{ notAvailableModel.comment.value }}</span>
              <input type="text" *ngIf="!notAvailableModel.comment.disabled" [(ngModel)]="notAvailableModel.comment.value" class="input" />
            </div>
          </div>
          <div class="action">
            <span (click)="changeInputStatus('comment', false)" *ngIf="notAvailableModel.comment.disabled">{{
              notAvailableModel.comment.value !== '' ? 'Ändern' : 'Hinzufügen'
            }}</span>
            <div class="save-action" *ngIf="!notAvailableModel.comment.disabled">
              <lib-icon
                *ngIf="!notAvailableModel.comment.errors && notAvailableModel.comment.value !== ''"
                name="close-branch"
                alt="close"
                height="18px"
                width="18px"
                pr="10px"
                pt="3px"
                (click)="clear('comment')"
              ></lib-icon>
              <span (click)="addComment(item.data)">Speichern</span>
            </div>
          </div>
        </div>
      </div>
      <hr class="spacer branch" />
    </ng-container>
  </div>

  <div class="single" *ngIf="order && order.items && order.items.length == 1">
    <ng-container *ngTemplateOutlet="readMoreButton; context: { $implicit: 0 }"></ng-container>
  </div>

  <ng-template #readMoreButton let-index>
    <div>
      <span
        *ngIf="!expanded(index); else less"
        class="more-btn align-right expand-more"
        [ngClass]="{ ipad: isIPad }"
        (click)="toggleMore(index)"
        >Mehr Bestelldetails
        <lib-icon name="Arrow_Next_branch" pl="8px" alt="more"></lib-icon>
      </span>
    </div>
    <ng-template #less>
      <span class="more-btn" (click)="toggleMore(index)">
        <lib-icon name="Arrow_back_branch" pr="8px" alt="less"></lib-icon>
        Weniger Bestelldetails
      </span>
    </ng-template>
  </ng-template>

  <div class="all-items-wrapper" *ngIf="isPositiveStatus">
    <div id="all-items" class="all-items" #allItemsEL (scroll)="scrollHandler($event)">
      <ng-container *ngFor="let item of allItems">
        <div class="all-items-item" [ngClass]="{ current: +item.id === +itemId }">
          <img [src]="item.product.ean | bookImageUrl | async" alt="book" class="thumbnail" />
        </div>
      </ng-container>
    </div>
    <div
      class="back-arrow-container"
      *ngIf="showBackContainer"
      (mouseover)="showBackIcon()"
      (mouseleave)="hideBackIcon()"
      [style.top.px]="topPosition"
    >
      <lib-icon class="icon" width="118px" name="tab_Arrow_branch_full" type="png" (click)="scrollBack()" *ngIf="showBack"></lib-icon>
    </div>
    <div
      class="foward-arrow-container"
      *ngIf="showFowardContainer"
      (mouseover)="showFowardIcon()"
      (mouseleave)="hideFowardIcon()"
      [style.top.px]="topPosition"
    >
      <lib-icon class="icon" width="118px" name="tab_Arrow_branch_full" type="png" (click)="scrollFoward()" *ngIf="showNext"></lib-icon>
    </div>
  </div>

  <div class="tags" *ngIf="isPositiveStatus && tags">
    <lib-tag mode="label" *ngIf="tags[0]" [selected]="tags[0].selected" label="Maxi" (changed)="tagUpdated($event, 0)"></lib-tag>
    <lib-tag mode="label" *ngIf="tags[1]" [selected]="tags[1].selected" label="Mini" (changed)="tagUpdated($event, 1)"></lib-tag>
    <lib-tag mode="label" *ngIf="tags[2]" [selected]="tags[2].selected" label="Kleinkram" (changed)="tagUpdated($event, 2)"></lib-tag>
    <lib-tag mode="label" *ngIf="tags[3]" [selected]="tags[3].selected" label="Nonbook" (changed)="tagUpdated($event, 3)"></lib-tag>
    <lib-tag mode="input" *ngIf="tags[4]" [selected]="tags[4].selected" (changed)="tagUpdated($event, 4)"></lib-tag>
  </div>

  <div class="actions">
    <app-button [primary]="true" *ngIf="isPositiveStatus" (action)="setAllArrived()">Status auf 'eingetroffen' setzen</app-button>
    <app-button [primary]="true" *ngIf="isNegativeStatus" (action)="setAllBackToStock()">Status auf 'ans Lager' setzen</app-button>
  </div>

  <div class="label" *ngIf="isPositiveStatus && allItems.length > 1">
    <div class="checkbox" [ngClass]="{ 'un-checked': !labelChecked }">
      <div class="filter-checkbox" (click)="labelChanged(!labelChecked)">
        <div>
          <lib-icon height="22px" name="Check_box_b"></lib-icon>
        </div>
        <div class="checked-box" *ngIf="labelChecked">
          <lib-icon name="Check_f_b"></lib-icon>
        </div>
      </div>
      <span>neues Abholfachettikett drucken</span>
    </div>
    <div class="info">
      <span>Dies scheint eine Bestellung mit 2 Artikel zu sein. Bitte Artikel zur Seite legen und sammeln.</span>
    </div>
  </div>
</div>
