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

        <div class="card-block p-t-24 p-b-8 overflow-visible">
          @if (loading) {
            <div>
              <c8y-loading></c8y-loading>
            </div>
          }

          @if (!loading) {
            <div class="col-md-6">
              <div class="form-group">
                <label translate>Current device protocol</label>
                @if (!currentProtocol) {
                  <p class="form-control-static">
                    {{ device.type }}
                  </p>
                }
                @if (currentProtocol) {
                  <p
                    class="form-control-static text-truncate"
                    title="{{ currentProtocol.name }}"
                  >
                    {{ currentProtocol.name }}
                  </p>
                }
              </div>
              <c8y-form-group>
                <c8y-typeahead
                  placeholder="{{ 'Select new device protocol' | translate }}"
                  name="newProtocol"
                  [(ngModel)]="newProtocol"
                  (onSearch)="setPipe($event)"
                  [allowFreeEntries]="false"
                >
                  <c8y-li
                    class="p-l-8 p-r-8 c8y-list__item--link"
                    *c8yFor="
                      let protocol of availableProtocols;
                      loadMore: 'hidden';
                      pipe: filterProtocols
                    "
                    (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 class="card-footer separator">
          <button
            class="btn btn-primary"
            title="{{ 'Save' | translate }}"
            type="submit"
            (click)="apply(newProtocol)"
            [disabled]="!newProtocol"
          >
            {{ 'Save' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
‌