<div class="c8y-empty-state m-t-4" *ngIf="!server">
  <h1 class="c8y-icon c8y-icon-duocolor" c8yIcon="server"></h1>
  <div>
    <p class="text-medium">{{ 'No server to display.' | translate }}</p>
    <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>
      {{ 'Back' | translate }}
    </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-level-2">
      <div class="tight-grid">
        <div class="col-sm-6">
          <label class="fit-w" 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'">
              {{ 'Enabled' | translate }}
            </span>
            <span title="{{ 'Disabled' | translate }}" [hidden]="targetConnectionState !== '0'">
              {{ 'Disabled' | translate }}
            </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 }}"
      type="button"
      class="btn btn-default"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      title="{{ 'Remove' | translate }}"
      type="button"
      class="btn btn-danger"
      (click)="remove()"
    >
      {{ 'Remove' | translate }}
    </button>
    <button
      title="{{ 'Save' | translate }}"
      type="submit"
      class="btn btn-primary"
      (click)="save()"
      [disabled]="!opcuaConfigForm.valid"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>