<div class="wrapper">
  <div class="product-image">
    <img
      class="thumbnail"
      src="https://produktbilder.ihugendubel.de/{{ orderItemListItem?.product.ean }}.jpg?showDummy=true"
      alt="item.product.name"
    />
  </div>
  <div class="product-details isa-flex-fill isa-flex isa-flex-row">
    <div class="isa-flex-fill">
      <h4 class="product-name">
        {{ [orderItemListItem?.product?.contributors, orderItemListItem?.product?.name] | title }}
      </h4>
      <h4 class="isa-mb-6 isa-mt-12">Bestellung</h4>
      <div class="detail">
        <div class="name">Format</div>
        <div class="value">
          {{ orderItemListItem?.product?.format }}
          {{ orderItemListItem?.product?.formatDetail }}
        </div>
      </div>
      <div class="detail">
        <div class="name">Menge</div>
        <div class="value">
          <button class="isa-btn btn-quantity isa-text-left isa-p-0" [disabled]="!selectable" (click)="quantityDropdown.toggle()">
            {{ orderItemListItem?.quantity }}x

            <lib-icon
              class="isa-ml-5"
              *ngIf="selectable"
              [class.up]="quantityDropdown.visible"
              [class.down]="!quantityDropdown.visible"
              name="Arrow_right"
              [height]="'16px'"
            ></lib-icon>
          </button>
          <app-ui-dropdown
            #quantityDropdown
            [value]="orderItemListItem.quantity"
            [(ngModel)]="orderItemListItem.quantity"
            (ngModelChange)="quantityChange.emit($event); quantityDropdown.close()"
          >
            <button
              appUiDropdownItem
              class="isa-btn isa-text-left isa-p-16"
              *ngFor="let val of dropdownValues"
              [selected]="val === orderItemListItem.quantity"
              [value]="val"
            >
              {{ val }}x
            </button>
          </app-ui-dropdown>
        </div>
      </div>
      <div class="detail">
        <div class="name">Preis</div>
        <div class="value">
          {{ orderItemListItem?.price | currency: 'EUR' }}
        </div>
      </div>
      <div class="detail">
        <div class="name">ISBN/EAN</div>
        <div class="value">
          {{ orderItemListItem?.product?.ean }}
        </div>
      </div>
      <ng-container *ngIf="more">
        <div class="detail">
          <div class="name">Zielfiliale</div>
          <div class="value">
            {{ orderItemListItem?.targetBranch }}
          </div>
        </div>
        <div class="detail">
          <div class="name">Lieferant</div>
          <div class="value">
            {{ orderItemListItem?.supplier }}
          </div>
        </div>
        <div class="detail">
          <div class="name">Meldenummer</div>
          <div class="value">{{ orderItemListItem?.ssc }} - {{ orderItemListItem?.sscText }}</div>
        </div>
        <div class="detail">
          <div class="name">MwSt</div>
          <div class="value">
            {{ orderItemListItem['vatType'] | vatType }}
          </div>
        </div>
        <button class="isa-btn isa-btn-default isa-p-0 isa-flex isa-align-items-center" (click)="more = false">
          <lib-icon name="Arrow_back" height="15px" class="isa-flex isa-mr-5"></lib-icon>
          <strong>Weniger</strong>
        </button>
      </ng-container>
    </div>
    <div class="isa-flex isa-flex-direction-column isa-justify-content-flex-end isa-text-right">
      <div class="isa-flex-fill"></div>
      <div *ngIf="selectable">
        <label class="checkbox-wrapper">
          <input type="checkbox" [ngModel]="selected" (ngModelChange)="selectedChange($event)" />
          <span class="checkmark"></span>
        </label>
      </div>
      <div class="isa-flex-fill"></div>
      <button class="isa-btn isa-btn-default isa-p-0 isa-flex isa-align-items-center" (click)="more = true" *ngIf="!more">
        <strong>Mehr</strong>
        <lib-icon name="Arrow_More" height="15px" class="isa-flex isa-ml-5"></lib-icon>
      </button>
    </div>
  </div>
</div>
