<form #lpwanSetDeviceProtocolForm="ngForm">
  <div class="row">
    <div class="col-md-9">
      <div class="card card--fullpage">
        <div class="card-header separator">
          <h4 class="card-title">
            {{ 'LPWAN configuration' | translate }}
          </h4>
        </div>

        <div class="card-block p-t-24 p-b-8 overflow-visible">
          <div *ngIf="loading">
            <c8y-loading></c8y-loading>
          </div>

          <div *ngIf="!loading">
            <div class="col-md-6">
              <div class="form-group">
                <label translate>Current device protocol</label>
                <p class="form-control-static" *ngIf="!currentProtocol">
                  {{ device.type }}
                </p>
                <p class="form-control-static" *ngIf="currentProtocol">
                  {{ currentProtocol.name }}
                </p>
              </div>
              <c8y-form-group>
                <c8y-typeahead
                  [(ngModel)]="newProtocol"
                  placeholder="{{ 'Select new device protocol' | translate }}"
                  (onSearch)="setPipe($event)"
                  name="newProtocol"
                  [allowFreeEntries]="false"
                >
                  <c8y-li
                    *c8yFor="
                      let protocol of availableProtocols;
                      loadMore: 'hidden';
                      pipe: filterProtocols
                    "
                    class="p-l-8 p-r-8 c8y-list__item--link"
                    (click)="newProtocol = protocol; setPipe('')"
                  >
                    <c8y-highlight [text]="protocol.name" [pattern]="pattern"></c8y-highlight>
                  </c8y-li>
                </c8y-typeahead>
                <c8y-messages
                  ><c8y-message
                    name="notExisting"
                    [text]="'Select one of the protocols.' | translate"
                  ></c8y-message>
                </c8y-messages>
              </c8y-form-group>
            </div>
            <set-lns-connections [device]="device"></set-lns-connections>
          </div>
        </div>

        <div class="card-footer separator">
          <button
            title="{{ 'Save' | translate }}"
            class="btn btn-primary"
            (click)="apply(newProtocol)"
            [disabled]="!newProtocol"
          >
            {{ 'Save' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
‌