<div class="card-container" [ngClass]="{ last: last }">
  <div class="card-wrapper">
    <app-remission-list-card-header [product]="product"></app-remission-list-card-header>
    <div class="card-details">
      <div class="icon">
        <img [src]="product.imageId | bookImageUrl | async" alt="book" class="thumbnail" />
      </div>
      <div class="details-info">
        <div class="general">
          <div class="format-edition item">
            <span class="format-icon">
              <lib-icon name="Icon_{{ product.format }}" mt="4px" height="17px"></lib-icon>
            </span>
            <span class="format-description" [ngClass]="{ expand: !product?.edition?.length }">{{ product.formatDetail }}</span>
            <span *ngIf="product.edition">|</span>
            <span class="edition">{{ product.edition }}</span>
          </div>
          <div class="item">
            <span>{{ product.ean }}</span>
          </div>
          <div class="price item">
            <span class="value">{{ product.price | bookPrice }}</span>
            <span class="currency">{{ product.currency }}</span>
          </div>
          <div class="features item" *ngIf="isArray(product.features)">
            <ng-container *ngFor="let feature of product.features; let index = index">
              <div class="features__tooltip-container">
                <div class="features__tooltip" *ngIf="toolTipOpened[index]">
                  <div class="feature-tooltip" [style.marginLeft.px]="tooltipMl">
                    {{ getObjectValue(feature, 0) }}
                    <lib-icon (click)="closeTooltip(index)" height="11px" name="Delete-white"></lib-icon>
                  </div>
                  <div class="feature-tooltip-arrow-down" [style.marginLeft.px]="tooltipArrowMl"></div>
                </div>
                <span (click)="openTooltip(index)">{{ getObjectKey(feature, 0) }}</span>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="quantity-placement">
          <div class="labels">
            <div class="label">aktueller Bestand</div>
            <div class="label">Remi-Menge</div>
            <div class="label">übriger Bestand</div>
            <div class="label">Platz</div>
            <div class="label" *ngIf="product.remissionReason">Remigrund</div>
          </div>
          <div class="datas">
            <div class="data">{{ product.inStock }}x</div>
            <div class="data">{{ product.remissionQuantity }}x</div>
            <div class="data short">{{ product.remainingQuantity }}x</div>
            <div class="data short">
              {{ product.placementType ? product.placementType : '&nbsp;' }}
            </div>
            <div class="data break" *ngIf="product.remissionReason">
              {{ product.remissionReason }}
            </div>
          </div>
          <div class="delete-product" *ngIf="product.isManuallyAdded">
            <app-button [alignRight]="true" [alignBottom]="true" (action)="deleteProduct.emit()">Entfernen</app-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
