<div class="p-24">
  <div class="row">
    <div class="col-xs-12 col-sm-3 col-md-2">
      <div
        class="h4 text-normal text-right text-left-xs"
        translate
      >
        External token configuration
      </div>
    </div>

    <div
      class="col-xs-12 col-sm-9 col-md-10 col-lg-9"
      *ngIf="templateModel"
    >
      <label
        class="c8y-switch"
        data-cy="c8y-authentication--external-token-configuration-switcher"
        title="{{ 'Allow authentication with access token from external IAM system' | translate }}"
      >
        <input
          id="enabled"
          name="enabled"
          type="checkbox"
          [(ngModel)]="externalTokenConfig.enabled"
        />
        <span></span>
        <span class="control-label">
          {{ 'Allow authentication with access token from external IAM system' | translate }}
        </span>
      </label>

      <div
        class="collapse"
        [collapse]="!externalTokenConfig.enabled"
        [isAnimated]="true"
      >
        <ng-container *ngIf="externalTokenConfig.enabled">
          <c8y-user-id-configuration
            [userIdConfig]="externalTokenConfig.userOrAppIdConfig"
            [withHeader]="false"
          ></c8y-user-id-configuration>

          <label
            class="c8y-switch"
            title="{{ 'Validate access token' | translate }}"
            for="validationRequired"
          >
            <input
              id="validationRequired"
              name="validationRequired"
              type="checkbox"
              [(ngModel)]="externalTokenConfig.validationRequired"
            />
            <span></span>
            <span class="control-label">{{ 'Validate access token' | translate }}</span>
          </label>
          <div
            class="collapse"
            [collapse]="!externalTokenConfig.validationRequired"
            [isAnimated]="true"
          >
            <ng-container *ngIf="externalTokenConfig.validationRequired">
              <div class="row">
                <div class="col-sm-6 m-t-16">
                  <label
                    class="control-label"
                    for="validationMethod"
                    translate
                  >
                    Validation method
                  </label>
                  <div class="c8y-select-wrapper">
                    <select
                      class="form-control"
                      id="validationMethod"
                      name="validationMethod"
                      [ngModel]="externalTokenConfig.validationMethod"
                      (ngModelChange)="onValidationMethodChange($event)"
                    >
                      <option
                        *ngFor="let validationMethod of validationMethods | keyvalue"
                        [ngValue]="validationMethod.key"
                      >
                        {{ validationMethod.value.label | translate }}
                      </option>
                    </select>
                    <span></span>
                  </div>
                </div>
              </div>
              <div class="row">
                <c8y-request-configuration
                  [templateModel]="externalTokenConfig"
                  [requestName]="'Token validation request' | translate"
                  [requestType]="'tokenValidationRequest'"
                ></c8y-request-configuration>
              </div>
              <div class="row">
                <div class="col-sm-6 m-l-8">
                  <c8y-form-group>
                    <label
                      class="control-label"
                      for="accessTokenValidityCheckIntervalInMinutes"
                      translate
                    >
                      Access token validation frequency
                    </label>
                    <div class="input-group">
                      <input
                        class="form-control"
                        id="accessTokenValidityCheckIntervalInMinutes"
                        name="accessTokenValidityCheckIntervalInMinutes"
                        type="number"
                        required
                        [(ngModel)]="externalTokenConfig.accessTokenValidityCheckIntervalInMinutes"
                        [placeholder]="'e.g. {{ example }}' | translate: { example: '1' }"
                        step="1"
                        [min]="1"
                      />
                      <span
                        class="input-group-addon"
                        translate
                      >
                        minutes
                      </span>
                    </div>
                  </c8y-form-group>
                </div>
              </div>
            </ng-container>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</div>