<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 data mappings</h4>
    </div>

    <div class="col-xs-12 col-sm-9 col-md-10 col-lg-9">
      <div class="legend form-block m-t-4">
        <span translate>Claim names</span>
        <button
          class="btn btn-clean"
          popover="{{ CLAIM_NAMES | translate }}"
          placement="right"
          [outsideClick]="true"
        >
          <i [c8yIcon]="'question-circle-o'" class="text-info"></i>
        </button>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="firstName" class="control-label" translate> First name </label>
            <input
              class="form-control"
              name="firstName"
              id="firstName"
              [(ngModel)]="templateModel.accessTokenToUserDataMappings.firstNameClaimName"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'given_name' }"
            />
          </c8y-form-group>
        </div>
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="lastName" class="control-label" translate> Last name </label>
            <input
              class="form-control"
              name="lastName"
              id="lastName"
              [(ngModel)]="templateModel.accessTokenToUserDataMappings.lastNameClaimName"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'family_name' }"
            />
          </c8y-form-group>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="email" class="control-label" translate> Email </label>
            <input
              class="form-control"
              name="email"
              id="email"
              [(ngModel)]="templateModel.accessTokenToUserDataMappings.emailClaimName"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'email' }"
            />
          </c8y-form-group>
        </div>
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="phoneNumber" class="control-label" translate> Phone number </label>
            <input
              class="form-control"
              name="phoneNumber"
              id="phoneNumber"
              [(ngModel)]="templateModel.accessTokenToUserDataMappings.phoneNumberClaimName"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'phone_number' }"
            />
          </c8y-form-group>
        </div>
      </div>
    </div>
  </div>
</div>