<c8y-title translate *ngIf="currentLns">Editing LoRa network server connector
  <em>{{ currentLns.name }}</em></c8y-title>
<button class="btn btn-primary" (click)="back()">&lt; Go back to LoRa network servers</button>
<div class="row" *ngIf="currentLns">
  <div class="card col-sm-6">
    <div class="card-header separator">
      <h4 class="card-title">
        Update LoRa network server connector <em>{{ currentLns.name }}</em>
      </h4>
    </div>
    <div class="card-block">
      <div class="col-sm-12">
        <div class="form-group">
          <label for="instanceName">Name:</label>
          <input #instanceName="ngModel" [(ngModel)]="currentLns.name" required />
        </div>
      </div>
      <form #instanceProperties="ngForm">
        <div *ngIf="properties !== undefined">
          <div *ngFor="let property of properties" class="col-sm-6">
            <div class="form-group" *ngIf="property.type === 'STRING' || property.type === 'TEXT'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <input [ngModel]="allProperties[property.name]" name="{{ property.name }}" #{{property.name}}="ngModel"
                ngModel required />
            </div>
            <div class="form-group" *ngIf="property.type === 'PASSWORD'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <input type="password" [ngModel]="allProperties[property.name]" name="{{ property.name }}"
                #{{property.name}}="ngModel" ngModel required />
            </div>
            <div class="form-group" *ngIf="property.type === 'NUMBER'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <input type="number" step="0.1" [ngModel]="allProperties[property.name]" name="{{ property.name }}"
                #{{property.name}}="ngModel" ngModel required />
            </div>
            <div class="form-group" *ngIf="property.type === 'INTEGER'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <input type="number" [ngModel]="allProperties[property.name]" name="{{ property.name }}"
                #{{property.name}}="ngModel" ngModel required />
            </div>
            <div class="form-group" *ngIf="property.type === 'BOOLEAN'">
              <label class="c8y-checkbox"><input type="checkbox" [ngModel]="allProperties[property.name]"
                  name="{{ property.name }}" #{{property.name}}="ngModel" ngModel required /><span></span>{{
                property.label }}</label>
            </div>
            <div class="form-group" *ngIf="property.type === 'LIST'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <select [ngModel]="allProperties[property.name]" class="form-control" name="{{ property.name }}"
                #{{property.name}}="ngModel" ngModel required>
                <option value="">Please select {{ property.name }}</option>
                <option *ngFor="let v of property.values" [value]="v.id">
                  {{ v.name }}
                </option>
              </select>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="card-footer">
      <div class="form-group" *ngIf="wizard !== undefined">
        <button *ngIf="currentStep < wizard.length - 1" type="button" (click)="nextStep(instanceProperties.value)"
          class="btn btn-primary">
          Next step
        </button>
        <button *ngIf="currentStep > 0" type="button" (click)="previousStep(instanceProperties.value)"
          class="btn btn-primary">
          Previous step
        </button>
        <button *ngIf="wizard.length === currentStep + 1" type="button"
          (click)="updateConnector(instanceProperties.value)" class="btn btn-primary">
          Update connector
        </button>
      </div>
    </div>
  </div>
</div>