<!--******************************************************************************
 * Copyright (c) 2015-2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 *******************************************************************************-->

<p-panel [toggleable]="true" [collapsed]="collapsed" [ngClass]="showButton ? 'thin-titlebar' : ''"
         toggler="header" expandIcon="fa fa-chevron-right fa-lg" collapseIcon="fa fa-chevron-down fa-lg" >
  <p-header >
    <span [ngClass]="showButton ? 'button-block' : ''">
      <span *ngIf="node" class="pannel-icon-header" [ngClass]="getClass()">
        {{node.type | mdmdatasourcetranslate}}
      </span>
      <span class="btn-group" style="float: right;">
        <button *ngIf="showButton" type="button" class="btn btn-mdm" (click)="add2Basket()" [disabled]="shoppable">
          {{ 'details.mdm-detail-panel.btn-into-shopping-basket' | translate }}
        </button>
      </span>
    </span>
  </p-header>
  <table class="table table-hover" style="margin-bottom: 0;">
    <thead>
      <tr>
        <th>{{ 'details.mdm-detail-panel.tblhdr-attribute' | translate }}</th>
        <th>{{ 'details.mdm-detail-panel.tblhdr-value' | translate }}</th>
        <th>{{ 'details.mdm-detail-panel.tblhdr-unit' | translate }}</th>
      </tr>
    </thead>
    <tbody *ngIf="node">
      <tr *ngFor="let attr of displayAttributes">
        <td>{{attr.name}}</td>
        <td>{{attr.value}}</td>
        <td>{{attr.unit}}</td>
      </tr>
    </tbody>
  </table>
</p-panel>