<app-modal id="remission-add-product-to-remission-modal" branch="true">
  <div class="modal-wrapper">
    <div class="header">
      <lib-icon (click)="closeDialog()" height="21px" class="close-icon" name="close-branch" alt="close"></lib-icon>
    </div>
    <div class="title">
      <span>Artikel zur Remi-Liste hinzufügen</span>
    </div>
    <hr class="spacer branch" />
    <div class="product-wrapper">
      <div class="icon">
        <img [src]="product.imageId | bookImageUrl | async" alt="book" class="thumbnail" />
      </div>
      <div class="details">
        <div class="authors-title-group-quantity">
          <div class="authors-title">
            <ng-container *ngIf="product.contributors; else productNameWithoutContributors">
              <span>{{ product.contributors + ' - ' + product.name }}</span>
            </ng-container>
            <ng-template #productNameWithoutContributors>
              <span>{{ product.name }}</span>
            </ng-template>
          </div>
          <div class="group-quantity">
            <div class="group">
              <div class="number">
                <span>{{ product.productGroup }}</span>
              </div>
              <div>
                <span>:</span>
              </div>
              <div class="name">
                <span>{{ product.productGroupName }}</span>
              </div>
            </div>
            <div class="quantity">
              <app-delete-dropdown
                [selected]="quantity"
                [options]="quantityRange"
                simplified="true"
                (valueChanges)="quantityUpdated($event)"
                mode="branch"
                #deleteDropdown
              ></app-delete-dropdown>
            </div>
          </div>
        </div>

        <div class="details-info">
          <div class="labels">
            <div class="label">
              <span>Format</span>
            </div>
            <div class="label">
              <span>Kennzeichen</span>
            </div>
            <div class="label">
              <span>Remigrund</span>
            </div>
          </div>
          <div class="datas">
            <div class="data format">
              <div class="format-icon">
                <lib-icon name="Icon_{{ product.format }}" mt="4px" height="17px"></lib-icon>
              </div>
              <div class="format-description">{{ product.formatDetail }}</div>
            </div>
            <div class="data">
              <div class="feature-tooltip" [style.marginLeft.px]="tooltipMl" *ngIf="toolTipOpened">
                {{ selectedFeatureDescription }}
                <lib-icon (click)="closeTooltip()" height="11px" name="Delete-white"></lib-icon>
              </div>
              <div class="feature-tooltip-arrow-down" [style.marginLeft.px]="tooltipArrowMl" *ngIf="toolTipOpened"></div>
              <div class="features item" *ngIf="isArray(product.features); else emptyFeatures">
                <span *ngFor="let feature of product.features; let index = index" (click)="openTooltip(feature.name, index)">{{
                  feature.key
                }}</span>
              </div>
              <ng-template #emptyFeatures>
                <div class="empty-feature"></div>
              </ng-template>
            </div>
            <div class="data">
              <div class="dd-width">
                <app-dropdown
                  boldSelected="true"
                  (valueChanges)="reasonUpdated($event)"
                  [options]="reasons"
                  [selected]="reason"
                  [showClosingArrow]="true"
                  [leftAligned]="true"
                  mode="branch"
                  boldSelected="true"
                  boldDdSelectedValue="true"
                ></app-dropdown>
              </div>
            </div>
            <div class="data" *ngIf="reasonError">
              <div class="reason-error">
                {{ reasonErrorMsg }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr class="spacer branch" />
    <div class="actions">
      <app-button [load]="true" primary="true" (action)="addProdcutToList()" #addProductButton>Hinzufügen</app-button>
    </div>
  </div>
</app-modal>
