<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef" [addCancelDialogButton]="false">
  <ng-template #dialogContent>
    <cdk-virtual-scroll-viewport *ngIf="data.detailData" itemSize="20" class="virtual-viewport">
      <table class="full-width">
        <ng-container *cdkVirtualFor="let item of data.detailData; let index=index">
          <tr *ngIf="item.start || item.end">
            <td i18n>Start: <app-date-displayer [date]="item.start" withTime></app-date-displayer></td>
            <td i18n>End: <app-date-displayer [date]="item.end" withTime></app-date-displayer></td>
            <td i18n>Value: {{ item.value }}<span *ngIf="item.price_details.attribute_unit_display"> {{item.price_details.attribute_unit_display}}</span></td>
            <td i18n>Price: {{ item.price | currencyFormatter: data.currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}</td>
            <td>
              <mat-icon class="fl-icons vertical-align-middle metric-detail-icon"
                    *ngIf="item.price_details" matTooltip="{{getEntryTooltip(item)}}">
                info
              </mat-icon>
            </td>
          </tr>
          <tr *ngIf="!(item.start || item.end)">
            <td i18n>Value: {{ item.value }}<span *ngIf="item.price_details.attribute_unit_display"> {{item.price_details.attribute_unit_display}}</span></td>
            <td i18n>Price: {{ item.price | currencyFormatter: data.currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}</td>
            <td i18n>Unit price: {{ item.price_details.unit_price | currencyFormatter: data.currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}</td>
            <td i18n>Time unit: {{ item.price_details.time_unit }}</td>
          </tr>
        </ng-container>
      </table>
    </cdk-virtual-scroll-viewport>
  </ng-template>
</app-common-dialog>
