<form #lpwanSetDeviceProtocolForm="ngForm" class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header separator">
        <h4 class="card-title">
          {{ 'LPWAN device protocol' | translate }}
        </h4>
      </div>
      <div *ngIf="loading" class="card-block">
        <div class="p-relative" style="min-height: 40px; min-width: 55px;">
          <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
          </div>
        </div>
        <span translate>Loading</span>
      </div>
      <div *ngIf="!loading">
        <div class="card-block">
          <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>
          <div class="form-group">
            <label translate>New device protocol</label>
            <div class="c8y-select-wrapper">
              <select class="form-control" [(ngModel)]="newProtocol" name="newProtocol" required>
                <option *ngIf="!newProtocol" [ngValue]="null">
                  {{ 'Select device protocol' | translate }}
                </option>
                <option
                  *c8yFor="let protocol of availableProtocols; pipe: filterCurrentProtocol"
                  [ngValue]="protocol"
                >
                  {{ protocol.name }}
                </option>
              </select>
            </div>
          </div>
        </div>
        <div class="card-footer separator">
          <button
            title="{{ 'Apply' | translate }}"
            class="btn btn-primary"
            (click)="apply(newProtocol)"
            [disabled]="!lpwanSetDeviceProtocolForm.dirty"
          >
            {{ 'Apply' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
‌