<div [ngClass]="withHeader ? 'p-24' : 'd-contents'">
  <div [ngClass]="withHeader ? 'row' : 'd-contents'">
    <div
      class="col-xs-12 col-sm-3 col-md-2"
      *ngIf="withHeader"
    >
      <div
        class="h4 text-normal text-right text-left-xs"
        translate
      >
        User ID
      </div>
    </div>
    <fieldset
      [ngClass]="withHeader ? 'col-xs-12 col-sm-9 col-md-10 col-lg-9' : 'c8y-fieldset p-24'"
    >
      <legend *ngIf="!withHeader">
        {{ 'User/App ID' | translate }}
      </legend>

      <div class="row">
        <div class="col-sm-6">
          <c8y-form-group *ngIf="userIdConfig.useConstantValue">
            <label
              class="control-label"
              [for]="'constantValue' + componentId"
              translate
            >
              Constant value
            </label>
            <input
              class="form-control"
              type="text"
              required
              [id]="'constantValue' + componentId"
              [name]="'constantValue' + componentId"
              [(ngModel)]="userIdConfig.constantValue"
            />
          </c8y-form-group>
          <c8y-form-group *ngIf="!userIdConfig.useConstantValue">
            <label
              class="control-label"
              [for]="'jwtField' + componentId"
              translate
            >
              JWT field
            </label>
            <input
              class="form-control"
              type="text"
              required
              [id]="'jwtField' + componentId"
              [name]="'jwtField' + componentId"
              [(ngModel)]="userIdConfig.jwtField"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'upn' }"
            />
          </c8y-form-group>
        </div>
        <div class="col-sm-6">
          <div
            class="form-group"
            *ngIf="shouldShow('useConstantValue')"
          >
            <div
              class="form-group"
              *ngIf="shouldShow('useConstantValue')"
            >
              <label
                class="c8y-switch m-t-24"
                data-cy="c8y-authentication--external-token-configuration-constant-value-switcher"
                title="{{ 'Use constant value' | translate }}"
                [for]="'useConstantValue' + componentId"
              >
                <input
                  type="checkbox"
                  [name]="'useConstantValue' + componentId"
                  [id]="'useConstantValue' + componentId"
                  [(ngModel)]="userIdConfig.useConstantValue"
                />
                <span></span>
                <span class="control-label">{{ 'Use constant value' | translate }}</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</div>