<!--********************************************************************************
 * 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
 *
 ********************************************************************************-->

<td style="vertical-align: middle">{{condition.type | mdmdatasourcetranslate}}</td> <!-- | translate -->
<td style="vertical-align: middle">{{condition.type | mdmdatasourcetranslate: condition.attribute }}</td> <!--  | translate: condition.attribute -->
<td style="vertical-align: middle">
  <div class="btn-group" dropdown style="width: 66px;">
    <button id="operator" type="button" title="{{ 'search.search-condition.tooltip-select-search-operator' | translate }}" class="btn btn-default btn-sm dropdown-toggle" dropdownToggle aria-haspopup="true" aria-expanded="false" [disabled]="disabled">
      {{getOperatorName(condition.operator)}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" *dropdownMenu>
      <li *ngFor="let op of getOperators()">
        <a class="dropdown-item" (click)="setOperator(op)">{{getOperatorName(op)}}</a>
      </li>
    </ul>
  </div>
</td>
<td [ngSwitch]="condition.valueType">
  <p-autoComplete *ngSwitchCase="'string'"
    [(ngModel)]="condition.value"
    [suggestions]="displayedSuggestions"
    (completeMethod)="updateSuggestions($event)"
    [multiple]="true"
    [delay]="0"
    [size]="500"
    [scrollHeight]="'50vh'"
    placeholder="Wert"
    [disabled]="disabled"
    (keyup.enter)="onEnter($event)">
  </p-autoComplete>
  <p-calendar *ngSwitchCase="'date'" 
    (ngModelChange)="setDateValue($event)" 
    [ngModel]="dateValue" 
    dateFormat="dd.mm.yy" 
    showTime="true" 
    hourFormat="24" 
    hideOnDateTimeSelect="true" 
    [showIcon]="true" 
    [disabled]="disabled"
    [ngStyle]="{ 'width': '100%' }">
  </p-calendar>
  <input *ngSwitchDefault type="text" class="form-control input-sm" placeholder="Wert" [value]="condition.value" (input)="setValue($event.target.value)" [disabled]="disabled">
</td>
<td style="vertical-align: middle"><button id="remove" type="button" class="btn btn-default btn-sm fa fa-times remove" (click)="remove()" [disabled]="disabled"></button></td>