<div
  class="card-block separator-top overflow-auto"
  *ngIf="authConfiguration.preferredLoginOptionType === tenantLoginOptionTypeEnum.OAUTH2_INTERNAL"
>
  <div class="col-sm-2">
    <div class="h4 text-normal text-right text-left-xs">
      {{ 'OAI-Secure session configuration' | translate }}
    </div>
  </div>

  <div class="col-sm-9">
    <div class="row">
      <div class="col-sm-6">
        <c8y-form-group>
          <label class="c8y-switch" title="{{ 'Use session configuration' | translate }}">
            <input
              type="checkbox"
              name="useSessionConfiguration"
              [(ngModel)]="useSessionConfiguration"
            />
            <span></span>
            <span>{{ 'Use session configuration' | translate }}</span>
          </label>
        </c8y-form-group>
      </div>
    </div>

    <fieldset *ngIf="sessionConfiguration">
      <div class="row">
        <div class="col-sm-6">
          <c8y-form-group>
            <label class="c8y-switch" title="{{ 'User agent validation required' | translate }}">
              <input
                type="checkbox"
                name="userAgentValidationRequired"
                [(ngModel)]="userAgentValidationRequired"
              />
              <span></span>
              <span>{{ 'User agent validation required' | translate }}</span>
              <button
                class="btn-help btn-help--sm"
                type="button"
                [attr.aria-label]="'Help' | translate"
                popover="{{ USER_AGENT_VALIDATION_REQUIRED_POPOVER | translate }}"
                placement="right"
                triggers="focus"
                container="body"
              ></button>
            </label>
          </c8y-form-group>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <c8y-form-group>
            <label title="{{ 'Session absolute timeout' | translate }}">
              {{ 'Session absolute timeout' | translate }}
            </label>
            <div class="input-group">
              <input
                type="number"
                name="absoluteTimeoutSeconds"
                class="form-control text-right"
                [(ngModel)]="absoluteTimeoutSeconds"
                [required]="useSessionConfiguration"
                [min]="absoluteTimeoutConstraints.min"
                step="1"
              />
              <span class="input-group-addon" translate>seconds</span>
            </div>
            <c8y-messages>
              <c8y-message
                name="min"
                text="{{ ABSOLUTE_TIMEOUT_VALIDATION_MESSAGE | translate }}"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>
        </div>
        <div class="col-sm-6">
          <c8y-form-group>
            <label title="{{ 'Session renewal timeout' | translate }}">
              {{ 'Session renewal timeout' | translate }}
            </label>
            <div class="input-group">
              <input
                type="number"
                name="renewalTimeoutSeconds"
                class="form-control text-right"
                [(ngModel)]="renewalTimeoutSeconds"
                [required]="useSessionConfiguration"
                [max]="renewalTimeoutConstraints.max"
                [min]="renewalTimeoutConstraints.min"
                step="1"
              />
              <span class="input-group-addon" translate>seconds</span>
            </div>
            <c8y-messages>
              <c8y-message
                name="max"
                text="{{ RENEWAL_TIMEOUT_VALIDATION_MESSAGE | translate }}"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <c8y-form-group>
            <label title="{{ 'Maximum parallel sessions per user' | translate }}">
              {{ 'Maximum parallel sessions per user' | translate }}
            </label>
            <div class="input-group">
              <input
                type="number"
                name="maximumNumberOfParallelSessions"
                class="form-control text-right"
                [(ngModel)]="maximumNumberOfParallelSessions"
                [required]="useSessionConfiguration"
                [min]="1"
                step="1"
              />
              <span class="input-group-addon" translate>sessions</span>
            </div>
          </c8y-form-group>
        </div>
        <div class="col-sm-6">
          <c8y-form-group>
            <label title="{{ 'Token lifespan' | translate }}">
              {{ 'Token lifespan' | translate }}
            </label>
            <div class="input-group">
              <input
                type="number"
                name="basicTokenLifespan"
                class="form-control text-right"
                [(ngModel)]="basicTokenLifespan"
                [required]="useSessionConfiguration"
                [max]="basicTokenLifespanConstraints.max"
                [min]="basicTokenLifespanConstraints.min"
                step="1"
              />
              <span class="input-group-addon" translate>seconds</span>
            </div>
            <c8y-messages>
              <c8y-message
                name="max"
                text="{{ MAX_TOKEN_LIFESPAN_VALIDATION_MESSAGE | translate }}"
              ></c8y-message>
              <c8y-message
                name="min"
                text="{{ MIN_TOKEN_LIFESPAN_VALIDATION_MESSAGE | translate }}"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>
        </div>
      </div>
    </fieldset>
  </div>
</div>