<div class="col-md-12 p-t-16">
  <div class="row m-l-8 m-r-8">
    <div class="col-xs-12 col-sm-3 col-md-2">
      <h4 class="text-normal text-right text-left-xs" translate>User ID</h4>
    </div>
    <div class="col-xs-12 col-sm-9 col-md-10 col-lg-9">
      <div class="row">
        <div class="col-sm-6">
          <c8y-form-group
            *ngIf="shouldShow('useConstantValue') && templateModel.userIdConfig.useConstantValue"
          >
            <label for="constantValue" class="control-label" translate> Constant value </label>
            <input
              type="text"
              class="form-control"
              id="constantValue"
              name="constantValue"
              [(ngModel)]="templateModel.userIdConfig.constantValue"
              required
            />
          </c8y-form-group>
          <c8y-form-group
            *ngIf="!shouldShow('useConstantValue') || !templateModel.userIdConfig.useConstantValue"
          >
            <label for="jwtField" class="control-label" translate> JWT field </label>
            <input
              type="text"
              class="form-control"
              id="jwtField"
              name="jwtField"
              [(ngModel)]="templateModel.userIdConfig.jwtField"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'upn' }"
              required
            />
          </c8y-form-group>
        </div>
        <div class="col-sm-6">
          <div class="form-group" *ngIf="shouldShow('useConstantValue')">
            <label title="{{ 'Use constant value' | translate }}" class="c8y-switch m-t-24">
              <input
                type="checkbox"
                name="useConstantValue"
                id="useConstantValue"
                [(ngModel)]="templateModel.userIdConfig.useConstantValue"
              />
              <span></span>
              <span class="control-label">{{ 'Use constant value' | translate }}</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>