<c8y-title translate>All gateways</c8y-title>

<div class="row">
  <div class="card col-sm-4">
    <div class="card-header separator">
      <h4 class="card-title">Create a new gateway</h4>
    </div>
    <div class="card-block">
      <form #provisionGatewayForm="ngForm">
        <c8y-form-group class="col-sm-6" [hasError]="
            gatewayName.invalid && (gatewayName.dirty || gatewayName.touched)
          ">
          <label for="gatewayName">Name:</label>
          <input class="form-control" required #gatewayName="ngModel" name="gatewayName"
            [(ngModel)]="provisionGateway.gatewayName" (change)="log(provision)" />
          <c8y-messages *ngIf="
              gatewayName.invalid && (gatewayName.dirty || gatewayName.touched)
            ">
            <c8y-message name="required" *ngIf="gatewayName.errors?.required">The gateway name is required
            </c8y-message>
          </c8y-messages>
        </c8y-form-group>
        <c8y-form-group class="col-sm-6" [hasError]="id.invalid && (id.dirty || id.touched)">
          <label>Gateway Id:</label>
          <input required #id="ngModel" name="id" [(ngModel)]="provisionGateway.gwEUI" class="form-control"
            aria-describedby="id-help" />
          <c8y-messages *ngIf="id.invalid && (id.dirty || id.touched)">
            <c8y-message name="required" *ngIf="id.errors?.required">The gateway Id is required
            </c8y-message>
          </c8y-messages>
        </c8y-form-group>
        <c8y-form-group class="col-sm-12" [hasError]="
            instanceSelect.invalid &&
            (instanceSelect.dirty || instanceSelect.touched)
          ">
          <div class="c8y-select-wrapper">
            <label for="instanceSelect">LoRa network server connectors:</label>
            <select class="form-control" name="instanceSelect" #instanceSelect="ngModel"
              [(ngModel)]="provisionGateway.instanceSelect" (change)="loadProperties(instanceSelect.value)">
              <option [ngValue]="undefined" [disabled]="true">
                Please select a connector
              </option>
              <option *ngFor="let instance of lnsInstances" [value]="instance.id">
                {{ instance.name }} - {{ proxyMap[instance.lnsType].name }}
              </option>
            </select>
          </div>
          <c8y-messages *ngIf="
              instanceSelect.invalid &&
              (instanceSelect.dirty || instanceSelect.touched)
            ">
            <c8y-message name="required" *ngIf="instanceSelect.errors?.required">The connector is required
            </c8y-message>
          </c8y-messages>
        </c8y-form-group>
        <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 class="form-control" [(ngModel)]="
                  gatewayProvisioningAdditionalProperties[property.name]
                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel [required]="property.required" />
            </c8y-form-group>
            <c8y-form-group *ngIf="property.type === 'PASSWORD'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <input class="form-control" type="password" [(ngModel)]="
                  gatewayProvisioningAdditionalProperties[property.name]
                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel [required]="property.required" />
            </c8y-form-group>
            <c8y-form-group *ngIf="property.type === 'NUMBER'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <input class="form-control" type="number" step="0.1" [(ngModel)]="
                  gatewayProvisioningAdditionalProperties[property.name]
                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel [required]="property.required" />
            </c8y-form-group>
            <c8y-form-group *ngIf="property.type === 'INTEGER'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <input class="form-control" type="number" [(ngModel)]="
                  gatewayProvisioningAdditionalProperties[property.name]
                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel [required]="property.required" />
            </c8y-form-group>
            <c8y-form-group *ngIf="property.type === 'BOOLEAN'">
              <label class="c8y-checkbox"><input type="checkbox" [(ngModel)]="
                    gatewayProvisioningAdditionalProperties[property.name]
                  " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel /><span></span>{{ property.label
                }}</label>
            </c8y-form-group>
            <c8y-form-group *ngIf="property.type === 'LIST'">
              <label for="{{ property.name }}">{{ property.label }}:</label>
              <select [(ngModel)]="
                  gatewayProvisioningAdditionalProperties[property.name]
                " class="form-control" name="{{ property.name }}" #{{property.name}}="ngModel" ngModel
                [required]="property.required">
                <option [ngValue]="undefined" [disabled]="true">
                  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">
        <button type="button" [disabled]="!provisionGatewayForm.form.valid" (click)="addGatewayFromForm()"
          class="btn btn-primary">
          Add gateway
        </button>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <h1 style="text-align: center; vertical-align: middle">or</h1>
  </div>
  <div class="card col-sm-4">
    <div class="card-header separator">
      <h4 class="card-title">Upload a CSV file</h4>
    </div>
    <div class="card-block">
      <c8y-form-group class="col-sm-12" [hasError]="
          instanceSelect.invalid &&
          (instanceSelect.dirty || instanceSelect.touched)
        ">
        <div class="c8y-select-wrapper">
          <label for="instanceSelect">LoRa network server connectors:</label>
          <select [required]="true" class="form-control" name="instanceSelect" #instanceSelect="ngModel"
            [(ngModel)]="bulkProvisionGateways.instanceSelect" (change)="loadBulkProperties(instanceSelect.value)">
            <option [ngValue]="undefined" [disabled]="true">
              Please select a connector
            </option>
            <option *ngFor="let instance of lnsInstances" [value]="instance.id">
              {{ instance.name }} - {{ proxyMap[instance.lnsType].name }}
            </option>
          </select>
        </div>
        <c8y-messages *ngIf="
            instanceSelect.invalid &&
            (instanceSelect.dirty || instanceSelect.touched)
          ">
          <c8y-message name="required" *ngIf="instanceSelect.errors?.required">The connector is required
          </c8y-message>
        </c8y-messages>
      </c8y-form-group>
      <div *ngIf="instanceSelect.valid">
        File must contain the following columns:<br />
        <span style="word-wrap: break-word">name;id;type;<span *ngIf="bulkProperties !== undefined"><span
              *ngFor="let bulkProperty of bulkProperties">;{{ bulkProperty.name
              }}<button *ngIf="bulkProperty.type === 'LIST'" class="btn-clean m-l-4 flex-item-middle"
                popoverTitle="Accepted values (label in parenthesis):"
                popover="{{ bulkProperty.values | property : 'id' : 'name' }}" placement="right" type="button">
                <i class="fa fw dlt-c8y-icon-help-outline text-primary"></i>
              </button>
            </span>
          </span>
        </span>
      </div>
      <div class="col-sm-12">
        <input type="file" (change)="changeListener($event.target.files)" />
      </div>
      <div *ngIf="fileContent !== undefined && fileContent.length > 0" class="col-sm-12">
        {{ fileContent.length }} gateways detected
      </div>
    </div>
    <div class="card-footer" *ngIf="fileContent !== undefined && fileContent.length > 0">
      <div class="form-group">
        <button type="button" (click)="addGateways()" class="btn btn-primary">
          Add gateways
        </button>
      </div>
    </div>
  </div>
</div>

<div class="split-scroll">
  <c8y-data-grid [title]="'Gateways' | translate" class="scroll-column" [columns]="columns" [pagination]="pagination"
    [selectable]="true" [actionControls]="actionControls" [bulkActionControls]="bulkActionControls"
    [serverSideDataCallback]="serverSideDataCallback">
    <c8y-column name="id">
      <ng-container *c8yCellRendererDef="let context">
        <a [routerLink]="['/device', context.value]">{{
          ids[context.value]
          }}</a>
      </ng-container>
    </c8y-column>
    <c8y-column name="status">
      <ng-container *c8yCellRendererDef="let context">
        <span class="tag tag--{{
        context.value !== 'AVAILABLE' ? 'danger' : 'success' 
        }}">{{ context.value }}</span>
      </ng-container>
    </c8y-column>
    <c8y-column name="lnstype">
      <ng-container *c8yCellRendererDef="let context">
        {{
        instanceMap[context.value] &&
        proxyMap[instanceMap[context.value].lnsType] &&
        proxyMap[instanceMap[context.value].lnsType].name
        }}
      </ng-container>
    </c8y-column>
    <c8y-column name="lnsname">
      <ng-container *c8yCellRendererDef="let context">
        {{ instanceMap[context.value] && instanceMap[context.value].name }}
      </ng-container>
    </c8y-column>
  </c8y-data-grid>
</div>

<ng-template #deleteGatewayModal>
  <div class="modal-header">
    <h4 id="dialog-name" class="modal-title pull-left">
      Confirm gateway deletion
    </h4>
  </div>
  <div class="modal-body">
    Gateway will be removed from inventory<br />
    <div class="form-group">
      <label class="c8y-checkbox"><input type="checkbox" #deprovision /><span></span>Deprovision gateway
        from LoRa network server</label>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" (click)="endDelete(deprovision.checked)" translate="" ng-reflect-translate="">
      Confirm
    </button>
    <button class="btn btn-primary" (click)="deleteGatewayModalRef.hide()" translate="" ng-reflect-translate="">
      Cancel
    </button>
  </div>
</ng-template>

<ng-template #deleteGatewaysModal>
  <div class="modal-header">
    <h4 id="dialog-name" class="modal-title pull-left">
      Confirm gateways deletion
    </h4>
  </div>
  <div class="modal-body">
    Gateways will be removed from inventory<br />
    <div class="form-group">
      <label class="c8y-checkbox"><input type="checkbox" #deprovision /><span></span>Deprovision gateways
        from LoRa network server</label>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" (click)="endDeleteAll(deprovision.checked)" translate="" ng-reflect-translate="">
      Confirm
    </button>
    <button class="btn btn-primary" (click)="deleteGatewaysModalRef.hide()" translate="" ng-reflect-translate="">
      Cancel
    </button>
  </div>
</ng-template>