<form #lpwanSetDeviceProtocolForm="ngForm">
  <div class="row">
    <div class="col-md-6">
      <div class="card card--fullpage">
        <div class="card-header separator">
          <h4 class="card-title">
            {{ 'LPWAN device protocol' | translate }}
          </h4>
        </div>
        <div class="p-16">
          <div *ngIf="loading">
            <c8y-loading></c8y-loading>
          </div>

          <div *ngIf="!loading">
            <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>
        </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>