<div class="col-md-6">
  <div class="form-group">
    <label translate>Current connection</label>
    <p class="form-control-static" *ngIf="!currentConnection">
      {{ 'Connection is not set. Select connection for this device' | translate }}
    </p>
    <p class="form-control-static text-truncate" *ngIf="currentConnection" title="{{ currentConnection.name }}">
      {{ currentConnection.name }}
    </p>
  </div>

  <c8y-form-group>
    <c8y-popover-confirm
      outsideClick="true"
      containerClass="lns-connection-popover"
      [message]="reRegisterMsg"
      [buttons]="buttons"
      [placement]="'bottom'"
    ></c8y-popover-confirm>
    <c8y-typeahead
      *ngIf="!loading"
      [(ngModel)]="newConnection"
      placeholder="{{ 'Select new connection' | translate }}"
      name="newConnection"
      (onSearch)="setConnectionPipe($event)"
      [allowFreeEntries]="false"
    >
      <c8y-li
        *c8yFor="let connection of availableConnections; loadMore: 'hidden'; pipe: filterConnection"
        class="p-l-8 p-r-8 c8y-list__item--link"
        (click)="togglePopover(popoverConfirm)"
      >
        <c8y-highlight [text]="connection.name" [pattern]="pattern"></c8y-highlight>
      </c8y-li>
    </c8y-typeahead>
    <c8y-messages
      ><c8y-message
        name="notExisting"
        [text]="'Select one of the connections.' | translate"
      ></c8y-message>
    </c8y-messages>
  </c8y-form-group>
</div>