<c8y-ui-empty-state
  [icon]="'server'"
  [title]="'No server to display.' | translate"
  [subtitle]="'Add or select a server.' | translate"
  *ngIf="!server"
></c8y-ui-empty-state>

<form
  class="d-contents"
  #opcuaConfigForm="ngForm"
  *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 }}"
      type="button"
      (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
          class="form-control"
          id="name"
          placeholder="{{ 'e.g. My server' | translate }}"
          name="name"
          type="text"
          required
          [(ngModel)]="model.name"
        />
        <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
            class="btn m-t-4"
            name="serverConnection"
            type="button"
            [(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
          class="form-control"
          id="configServerUrl"
          name="serverUrl"
          type="text"
          required
          [(ngModel)]="model.config.serverUrl"
          c8yDefaultValidation="opcuaBrowsePath"
        />
      </c8y-form-group>

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

      <!-- AUTHENTICATION -->
      <div class="row tight-grid">
        <div class="col-md-6">
          <div class="form-group">
            <label
              for="config.authenticationMode"
              translate
            >
              Authentication
            </label>
            <div class="c8y-select-wrapper">
              <select
                class="form-control"
                id="config.authenticationMode"
                name="authenticationMode"
                required
                [(ngModel)]="authenticationMode"
                (ngModelChange)="updateAuthentication($event)"
              >
                <option
                  *ngFor="let auth of authenticationModes"
                  [ngValue]="auth"
                >
                  {{ auth.value | translate }}
                </option>
              </select>
              <span></span>
            </div>
          </div>
        </div>
      </div>
      <!-- User/Pw-->
      <div
        class="tight-grid"
        *ngIf="authenticationMode.id === 2"
      >
        <div class="col-md-6">
          <div class="form-group">
            <label
              for="config.userName"
              translate
            >
              Username
            </label>
            <input
              class="form-control"
              id="config.userName"
              placeholder="{{ 'e.g. joe.doe`LOCALIZE`' | translate }}"
              name="userName"
              type="text"
              autocomplete="new-password"
              required
              [(ngModel)]="model.config.userName"
            />
          </div>
        </div>

        <!-- change password section BEGINS-->
        <div class="col-md-6">
          <div
            class="form-group"
            *ngIf="!initialPasswordRequired"
          >
            <button
              class="btn btn-default"
              type="button"
              (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
                class="form-control"
                id="config.userPassword"
                name="password"
                type="password"
                autocomplete="new-password"
                required
                [(ngModel)]="model.config.userPassword"
              />
            </div>
          </div>
        </div>
        <!-- change password section ENDS-->
      </div>

      <!-- Key-based -->
      <div
        class="tight-grid"
        *ngIf="authenticationMode.id === 3"
      >
        <!-- KEYSTORE PASSWORD -->
        <div class="col-md-6">
          <div class="form-group">
            <label
              for="config.keystorePass"
              translate
            >
              Keystore password
            </label>
            <input
              class="form-control"
              id="config.keystorePass"
              name="keystorePass"
              type="password"
              required
              [(ngModel)]="model.config.keystorePass"
            />
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label
              for="config.certificatePass"
              translate
            >
              Certificate password
            </label>
            <input
              class="form-control"
              id="config.certificatePass"
              name="keystorePass"
              type="password"
              required
              [(ngModel)]="model.config.certificatePass"
            />
          </div>
        </div>
        <!-- UPLOAD KEYSTORE -->
        <div class="col-md-12">
          <div class="form-group">
            <label
              for="certificateUpload"
              translate
            >
              Upload keystore
            </label>
            <input
              class="form-control m-b-8"
              placeholder="{{ 'e.g.' | translate }} yourKeystore.jks"
              name="certificateUpload"
              type="text"
              required
              [readonly]="true"
              [ngModel]="fileName"
            />
            <c8y-drop-area
              [title]="'Import keystore with jks file extension' | translate"
              (dropped)="uploadFile($event)"
              [loadingMessage]="'Importing, please wait.' | translate"
            ></c8y-drop-area>
          </div>
        </div>
      </div>

      <div class="form-group m-b-0 d-flex a-i-center">
        <button
          class="btn btn-dot collapse-btn"
          title="{{ (advancedSettings ? collapse : expand) | translate }}"
          [attr.aria-label]="(advancedSettings ? collapse : expand) | translate"
          [attr.aria-expanded]="advancedSettings"
          [ngClass]="{ active: advancedSettings }"
          (click)="advancedSettings = !advancedSettings"
          data-cy="opcua-server-config--advanced-settings-toggle"
        >
          <i c8yIcon="chevron-right"></i>
        </button>
        <label class="m-0">
          <span>{{ 'Advanced settings' | translate }}</span>
        </label>
      </div>
    </div>

    <div
      class="card-block collapse"
      [collapse]="!advancedSettings"
      [isAnimated]="true"
      [ngClass]="{ 'bg-level-1': advancedSettings }"
    >
      <formly-form
        [form]="advancedSettingsForm"
        [fields]="advancedSettingsFields"
        [model]="model.config"
      ></formly-form>
    </div>
  </div>
  <div class="card-footer large-padding separator sticky-bottom">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-danger"
      title="{{ 'Remove' | translate }}"
      type="button"
      (click)="remove()"
      [disabled]="isNew()"
    >
      {{ 'Remove' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="submit"
      (click)="save()"
      [disabled]="!opcuaConfigForm.valid || !advancedSettingsForm.valid"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>