<div class="l-wrapper">
    <button class="btn btn-black l-close" (click)="onClose(); formDir.resetForm();"><i class="fas fa-times"></i></button>
    <h1 class="l-title">Pinpoint User</h1> 
    <form class="l-form" [formGroup]="pinpointUserForm" #formDir="ngForm" (ngSubmit)="onCreateOrUpdate()">
        <div class="l-field-wrapper">
            <label class="l-label" for="userId">{{i18nLabel.USER_ID_LABEL}} <span class="l-required-icon">*</span></label>
            <input type="text" class="l-input" id="userId" formControlName="userId" [readonly]="!!userInfo" required>
            <pp-form-field-error-message
                [control]="pinpointUserForm.get('userId')"
                [errorMessage]="i18nGuide['userId']">
            </pp-form-field-error-message>
        </div>
        <div class="l-field-wrapper">
            <label class="l-label" for="name">{{i18nLabel.NAME_LABEL}} <span class="l-required-icon">*</span></label>
            <input type="text" class="l-input" id="name" formControlName="name" [readonly]="!allowedUserEdit" required>
            <pp-form-field-error-message
                [control]="pinpointUserForm.get('name')"
                [errorMessage]="i18nGuide['name']">
            </pp-form-field-error-message>
        </div>
        <div class="l-field-wrapper">
            <label class="l-label" for="department">{{i18nLabel.DEPARTMENT_LABEL}}</label>
            <input type="text" class="l-input" id="department" formControlName="department" [readonly]="!allowedUserEdit">
            <pp-form-field-error-message
                [control]="pinpointUserForm.get('department')"
                [errorMessage]="i18nGuide['department']">
            </pp-form-field-error-message>
        </div>
        <div class="l-field-wrapper">
            <label class="l-label" for="phoneNumber">{{i18nLabel.PHONE_LABEL}}</label>
            <input type="text" class="l-input" id="phoneNumber" formControlName="phoneNumber"
                (keyup)="onKeyup()"
                (countrychange)="onCountryChange()"
                [readonly]="!allowedUserEdit"
                #telInput>
            <input type="hidden" formControlName="phoneCountryCode">
            <pp-form-field-error-message
                [control]="pinpointUserForm.get('phoneNumber')"
                [errorMessage]="i18nGuide['phoneNumber']">
            </pp-form-field-error-message>
        </div>
        <div class="l-field-wrapper">
            <label class="l-label" for="email">{{i18nLabel.EMAIL_LABEL}}</label>
            <input type="text" class="l-input" id="email" formControlName="email" [readonly]="!allowedUserEdit">
            <pp-form-field-error-message
                [control]="pinpointUserForm.get('email')"
                [errorMessage]="i18nGuide['email']">
            </pp-form-field-error-message>
        </div>
        <button type="submit" class="btn btn-blue l-create" [disabled]="!allowedUserEdit">OK</button>
    </form>
</div>
