<div class="c8y-empty-state m-t-24"  ng-if="!vm.editInstruction.type" *ngIf="!server">
    <h1 class="c8y-icon c8y-icon-duocolor" c8yIcon="server"></h1>
    <div>
      <h3>{{ 'No server to display.' | translate }}</h3>
      <p>{{ 'Add or select a server.' | translate}}</p>
    </div>
  </div>


<form #opcuaConfigForm="ngForm" class="d-contents" *ngIf="server">
  <div class="card-header large-padding separator sticky-top visible-sm visible-xs" >
    <button
    class="btn btn-clean text-primary visible-sm visible-xs"
    title="{{ 'Back' | translate }}"
    (click)="cancel()"
    >
      <i c8yIcon="chevron-left"></i>
      <span translate>Back</span>
    </button>
  </div>
  <div class="flex-grow">
  <div class="card-block large-padding">
    <!-- SERVER NAME -->
    <c8y-form-group class="m-b-8">
      <label>
        {{ 'Server name' | translate }}
      </label>
      <input
        type="text"
        class="form-control"
        placeholder="{{ 'e.g. My server' | translate }}"
        id="name"
        name="name"
        [(ngModel)]="model.name"
        required
      />
      <c8y-messages>
        <c8y-message name="required" text="{{ 'Server name is required' | translate }}"></c8y-message>
      </c8y-messages>
    </c8y-form-group>
  </div>

    <div class="card-block large-padding bg-gray-lighter">
      <div class="tight-grid">
        <div class="col-sm-6">
          <label style="width: 100%;" translate>Server connection</label>
          <button
            type="button"
            class="btn m-t-4"
            name="serverConnection"
            [(ngModel)]="targetConnectionState"
            (ngModelChange)="setServerConnection($event)"
            btnCheckbox
            btnCheckboxTrue="1"
            btnCheckboxFalse="0"
          >
            <span
              title="{{ 'Enabled' | translate }}"
              [hidden]="targetConnectionState !== '1'"
              translate
              >Enabled</span
            >
            <span
              title="{{ 'Disabled' | translate }}"
              [hidden]="targetConnectionState !== '0'"
              translate
              >Disabled</span
            >
          </button>
        </div>
        <div class="col-sm-6">
          <label translate>Connection status</label>
          <div class="form-control-static">
            <device-status class="p-r-8" [mo]="server"></device-status>
            <span>{{ connectionStatusLabel | translate }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-block large-padding">
      <!-- SERVER URL-->
      <c8y-form-group>
        <label for="configServerUrl" translate>Server URL</label>
        <input
          type="text"
          class="form-control"
          id="configServerUrl"
          name="serverUrl"
          [(ngModel)]="model.config.serverUrl"
          c8yDefaultValidation="opcuaBrowsePath"
          required
        />
      </c8y-form-group>

      <!-- TIMEOUT & STATUS-CHECK-INTERVAL-->
      <div class="content-flex-32">
        <div class="col-6">
          <c8y-form-group>
            <label for="config.timeout" translate>Timeout</label>
            <div class="input-group">
              <input
                type="number"
                class="form-control"
                id="config.timeout"
                name="timeout"
                [min]="minIntervalNumber"
                placeholder="{{ 'e.g.' | translate }} 30"
                [(ngModel)]="model.config.timeout"
                required
              />
              <span class="input-group-addon units" translate>
                seconds
              </span>
            </div>
          </c8y-form-group>
        </div>
        <div class="col-6">
          <c8y-form-group>
            <label for="config.statusCheckInterval" translate>Status check interval</label>
            <div class="input-group">
              <input
                type="number"
                class="form-control"
                id="config.statusCheckInterval"
                name="statusCheckInterval"
                [min]="minIntervalNumber"
                placeholder="{{ 'e.g.' | translate }} 40"
                [(ngModel)]="model.config.statusCheckInterval"
                required
              />
              <span class="input-group-addon units" translate>
                seconds
              </span>
            </div>
          </c8y-form-group>
        </div>
      </div>

      <!-- SECURITY MODE -->
      <div class="tight-grid">
        <div class="col-md-6">
          <div class="form-group">
            <!-- NONE, SIGN, SIGN & ENCRYPT-->
            <label for="config.securityMode" translate>Security mode</label>
            <div class="c8y-select-wrapper">
              <select
                class="form-control"
                id="config.securityMode"
                [(ngModel)]="currentSecMode"
                (ngModelChange)="setPolicy($event)"
                name="securityMode"
                required
              >
                <option *ngFor="let mode of securityModes" [ngValue]="mode">{{ mode }}</option>
              </select>
              <span></span>
            </div>
          </div>
        </div>
        <div *ngIf="currentSecMode === NONE" class="col-md-6">
          <div class="form-group">
            <label for="config.securityPolicy" translate>Security policy</label>
            <input
              type="text"
              class="form-control"
              id="config.securityPolicy"
              name="securityPolicy"
              [readonly]="true"
              [(ngModel)]="model.config.securityMode"
              required
            />
          </div>
        </div>
        <div *ngIf="currentSecMode !== NONE" class="col-md-6">
          <div class="form-group">
            <label for="config.securityPolicy" translate>Security policy</label>
            <div class="c8y-select-wrapper">
              <select
                *ngIf="currentSecMode === SIGN"
                class="form-control"
                id="config.securityPolicy"
                [(ngModel)]="model.config.securityMode"
                name="securityPolicy"
                required
              >
                <option *ngFor="let policy of securityPolicies.sign" [ngValue]="policy">{{
                  policy
                }}</option>
              </select>
              <select
                *ngIf="currentSecMode === SIGN_ENC"
                class="form-control"
                id="config.securityPolicy"
                [(ngModel)]="model.config.securityMode"
                name="securityPolicy"
                required
              >
                <option *ngFor="let policy of securityPolicies.sign_enc" [ngValue]="policy">{{
                  policy
                }}</option>
              </select>
              <span></span>
            </div>
          </div>
        </div>
      </div>

      <!-- AUTHENTICATION -->
      <div class="form-group">
        <label for="config.authenticationMode" translate>Authentication</label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            id="config.authenticationMode"
            [(ngModel)]="authenticationMode"
            name="authenticationMode"
            (ngModelChange)="updateAuthentication($event)"
            required
          >
            <option *ngFor="let auth of authenticationModes" [ngValue]="auth">{{
              auth.value | translate
            }}</option>
          </select>
          <span></span>
        </div>
      </div>

      <!-- User/Pw-->
      <div *ngIf="authenticationMode.id === 2" class="tight-grid">
        <div class="col-md-12">
          <div class="form-group">
            <label for="config.userName" translate>Username</label>
            <input
              type="text"
              class="form-control"
              id="config.userName"
              name="userName"
              placeholder="{{ 'e.g. joe.doe`LOCALIZE`' | translate }}"
              [(ngModel)]="model.config.userName"
              autocomplete="new-password"
              required
            />
          </div>
        </div>
        <!-- change password section BEGINS-->
        <div class="col-md-6">
          <div class="form-group" *ngIf="!initialPasswordRequired">
            <button type="button" class="btn btn-default" (click)="toggleChangePassword()">
              <ng-container *ngIf="!changePassword">
                {{ 'Change password' | translate }}
              </ng-container>
              <ng-container *ngIf="changePassword">
                {{ 'Cancel password change' | translate }}
              </ng-container>
            </button>
          </div>

          <div class="form-group">
            <div *ngIf="changePassword">
              <label for="config.password" translate>Password</label>
              <input
                type="password"
                class="form-control"
                id="config.userPassword"
                name="password"
                [(ngModel)]="model.config.userPassword"
                autocomplete="new-password"
                required
              />
            </div>
          </div>
        </div>
        <!-- change password section ENDS-->
      </div>
      <!-- Key-based -->
      <div *ngIf="authenticationMode.id === 3" class="tight-grid">
        <!-- KEYSTORE PASSWORD -->
        <div class="col-md-6">
          <div class="form-group">
            <label for="config.keystorePass" translate>Keystore password</label>
            <input
              type="password"
              class="form-control"
              id="config.keystorePass"
              name="keystorePass"
              [(ngModel)]="model.config.keystorePass"
              required
            />
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="config.certificatePass" translate>Certificate password</label>
            <input
              type="password"
              class="form-control"
              id="config.certificatePass"
              name="keystorePass"
              [(ngModel)]="model.config.certificatePass"
              required
            />
          </div>
        </div>
        <!-- UPLOAD KEYSTORE -->
        <div class="col-md-12">
          <div class="form-group">
            <label for="certificateUpload" translate>Upload keystore</label>
            <input
              type="text"
              [readonly]="true"
              name="certificateUpload"
              class="form-control m-b-8"
              [ngModel]="fileName"
              placeholder="{{ 'e.g.' | translate }} yourKeystore.jks"
              required
            />
            <c8y-drop-area
              (dropped)="uploadFile($event)"
              [loadingMessage]="'Importing, please wait.' | translate"
              [title]="'Import keystore with jks file extension' | translate"
            >
            </c8y-drop-area>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer large-padding separator sticky-bottom">
    <button title="{{ 'Cancel' | translate }}" class="btn btn-default" (click)="cancel()" translate>
      Cancel
    </button>
    <button title="{{ 'Remove' | translate }}" class="btn btn-danger" (click)="remove()" translate>
      Remove
    </button>
    <!-- Add [disabled]="method()" when form is invalid-->
    <button
      title="{{ 'Save' | translate }}"
      class="btn btn-primary"
      (click)="save()"
      [disabled]="!opcuaConfigForm.valid"
      translate
    >
      Save
    </button>
  </div> 
</form>