<app-sale-detail [dataItem]="dataItemSelected"</app-sale-detail>

<div *ngIf="dataItem">
<table>
  <colgroup>
    <col style="width:70%">
    <col style="width:30%">
  </colgroup>
  <tr>
    <td colspan="2" align="center">
      <h2>Details</h2>
    </td>
  </tr>
  <tr><td><label>Name:</label></td><td><div class="detail">{{dataItem.name}}</div></td></tr>
  <tr><td><label>Beschreibung:</label></td><td><div class="detail">{{dataItem.gruppe.beschreibung}}</div></td></tr>
  <tr *ngIf="dataItem.preislisten.length > 0">
    <td><label>Artikelpreisliste:</label></td>
    <td>
      <div class="detail">
        <select [(ngModel)]="selectArtikelPreisliste" >
          <option *ngFor="let item of dataItem.preislisten; let i = index" value="{{i}}">
            {{ (item.preisliste == null || item.preisliste.bezeichnung == null) ?
            "[ID " + item.preisliste_ArtikelID + "]" : item.preisliste.bezeichnung}}
          </option>
        </select>
        <input type="radio"
               name="checkPreisliste"
               (click)="checkArtikelPreisliste(selectArtikelPreisliste)"
               [checked]="(dataItem.preislisten.length > 0)" />
      </div>
    </td>
  </tr>
  <tr *ngIf="dataItem.gruppe.preislisten.length > 0">
    <td><label>Gruppenpreisliste:</label></td>
    <td>
      <div class="detail">
        <select [(ngModel)]="selectGruppenPreisliste" >
          <option *ngFor="let item of dataItem.gruppe.preislisten; let i = index" value="{{i}}">
            {{ (item.preisliste == null || item.preisliste.bezeichnung == null) ?
            "[ID " + item.preisliste_ArtikelID + "]" : item.preisliste.bezeichnung}}
          </option>
        </select>
        <input type="radio"
               name="checkPreisliste"
               (click)="checkGruppenPreisliste(selectGruppenPreisliste)"
               [checked]="(dataItem.preislisten.length == 0 && dataItem.gruppe.preislisten.length > 0)" />
      </div>
    </td>
  </tr>
  <tr><td><label>Preis:</label></td><td><div class="detail">{{calculateCurrentPriceInitial() | currency:"EUR":"code"}}</div></td></tr>
  <tr><td><label>Anzahl:</label></td><td><input class="detail" type="number" min="1"
                                                #count value="1" (keyup)="sendbutton.disabled = count.value < 1"
                                                (click)="sendbutton.disabled = count.value < 1"/></td></tr>
  <tr>
    <td colspan="2" width="100%" align="center">
      <button #sendbutton (click)="addItemToShoppingCart(2, count.value,
        selectArtikelPreisliste, selectGruppenPreisliste)">Zum Warenkorb hinzufügen</button>
    </td>
  </tr>
</table>