<!--********************************************************************************
 * Copyright (c) 2015-2018 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 | translate}}</td>
<td style="vertical-align: middle">{{condition.type | translate: condition.attribute}}</td>
<td style="vertical-align: middle">
  <div class="btn-group" dropdown style="width: 66px;">
    <button id="operator" type="button" title="{{TtlSelectSearchOperator}}" 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>
  <div search-datepicker *ngSwitchCase="'date'" (onSetValue)="setValue($event)" style="width: 100%" [disabled]="disabled" [initialValue]="condition.value"></div>
  <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 glyphicon glyphicon-remove remove" (click)="remove()" [disabled]="disabled"></button></td>