<c8y-title translate>All LoRa network servers</c8y-title>

<div class="row">
  <div class="card col-sm-6">
    <div class="card-header separator">
      <h4 class="card-title">Add a new LoRa network server connector</h4>
    </div>
    <div class="card-block">
      <form #instanceProperties="ngForm">

      <div class="col-sm-12">
        <c8y-form-group class="col-sm-6" [hasError]="
        instanceName.invalid && (instanceName.dirty || instanceName.touched)
      ">
          <label for="instanceName">Name:</label>
          <input #instanceName="ngModel" required [(ngModel)]="instanceProperties.instanceName"/>
          <c8y-messages *ngIf="
          instanceName.invalid && (instanceName.dirty || instanceName.touched)
            ">
            <c8y-message name="required" *ngIf="instanceName.errors?.required">The connector name is required
            </c8y-message>
          </c8y-messages>
        </c8y-form-group>
      </div>
      <div class="col-sm-12">
        <div class="c8y-select-wrapper">
          <label for="model">LoRa network server:</label>
          <select class="form-control" #model (change)="loadWizard(model.value)">
            <option value="">Please select a provider</option>
            <option *ngFor="let proxy of lnsProxies" [value]="proxy.lnsType">
              {{ proxy.name }}
            </option>
          </select>
        </div>
      </div>
        <div *ngIf="properties !== undefined">
          <div *ngFor="let property of properties" class="col-sm-6">
            <c8y-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 />
            </c8y-form-group>
            <c8y-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 />
            </c8y-form-group>
            <c8y-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 />
            </c8y-form-group>
            <c8y-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 />
            </c8y-form-group>
            <c8y-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>
            </c8y-form-group>
            <c8y-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>
            </c8y-form-group>
          </div>
        </div>
      </form>
    </div>
    <div class="card-footer">
      <div class="form-group" *ngIf="wizard !== undefined">
        <button *ngIf="currentStep < wizard.length - 1" type="button" [disabled]="!instanceProperties.form.valid"
          (click)="nextStep(model.value, instanceProperties.value)" class="btn btn-primary">
          Next step
        </button>
        <button *ngIf="currentStep > 0" type="button" (click)="previousStep(model.value, instanceProperties.value)"
          class="btn btn-primary">
          Previous step
        </button>
        <button *ngIf="wizard.length === currentStep + 1" type="button" [disabled]="!instanceName.value" (click)="
            addInstance(
              model.value,
              instanceProperties.value.instanceName,
              instanceProperties.value
            )
          " class="btn btn-primary">
          Add connector
        </button>
      </div>
    </div>
  </div>
</div>

<div *ngIf="lnsInstances === undefined || lnsInstances.length === 0">
  {{ informationText | translate }}
</div>

<table class="table table-striped table-hover" *ngIf="lnsInstances !== undefined && lnsInstances.length > 0">
  <thead>
    <tr>
      <th scope="col" translate>Name</th>
      <th scope="col" translate>Type</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let instance of lnsInstances" (click)="edit(instance)" class="interact">
      <td>
        <a href="#/lns/{{ instance.id }}">{{ instance.name }}</a>
      </td>
      <td *ngIf="proxyMap && proxyMap[instance.lnsType]">
        {{ proxyMap[instance.lnsType].name }}
      </td>
      <td class="text-center">
        <div style="max-width: 240px" class="text-truncate">
          <button class="btn-dot showOnHover" uib-tooltip="Delete LNS connector" tooltip-append-to-body="true"
            tooltip-placement="left" (click)="delete(instance)">
            <i c8y-icon="minus-circle" class="text-danger dlt-c8y-icon-minus-circle"></i>
          </button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<ng-template #deleteLNSModal>
  <div class="modal-header">
    <h4 id="dialog-name" class="modal-title pull-left">
      Confirm LNS connector deletion
    </h4>
  </div>
  <div class="modal-body">LNS connector will be removed</div>
  <div class="modal-footer">
    <button class="btn btn-default" (click)="endDelete()" translate="" ng-reflect-translate="">
      Confirm
    </button>
    <button class="btn btn-primary" (click)="deleteLNSModalRef.hide()" translate="" ng-reflect-translate="">
      Cancel
    </button>
  </div>
</ng-template>