<clr-modal [(clrModalOpen)]="addMemberOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
    <h3 class="modal-title">{{'MEMBER.NEW_MEMBER' | translate}}</h3>
    <div class="modal-body">
        <inline-alert class="modal-title"></inline-alert>
        <label>{{ 'MEMBER.NEW_USER_INFO' | translate}}</label>
        <form #memberForm="ngForm" class="clr-form clr-form-horizontal">
            <div class="clr-form-control">
                <label class="required clr-control-label">{{'MEMBER.NAME' | translate}}</label>
                <div class="clr-control-container" [class.clr-error]="(memberName.invalid && (memberName.touched||memberName.dirty)) || !isMemberNameValid">
                    <div class="clr-input-wrapper" (mouseleave)="leaveInput()">
                        <input class="clr-input" type="text" id="member_name"  [(ngModel)]="member.username"
                               name="member_name"
                               #memberName="ngModel"
                               required
                               (keyup)="handleValidation()" autocomplete="off">
                        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                        <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
                        <div class="selectBox"  [style.display]="searchedUserLists.length ? 'block' : 'none'" >
                            <ul>
                                <li *ngFor="let user of searchedUserLists" (click)="selectedName(user.username)">{{user.username}}</li>
                            </ul>
                        </div>
                    </div>
                    <clr-control-error *ngIf="(memberName.invalid && (memberName.touched||memberName.dirty)) || !isMemberNameValid" class="tooltip-content">
                        {{ memberTooltip | translate }}
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control">
                <label class="clr-control-label">{{'MEMBER.ROLE' | translate}}</label>
                <div class="clr-control-container">
                    <clr-radio-wrapper>
                        <input clrRadio type="radio" name="member_role" id="checkrads_project_admin" [value]=1 [(ngModel)]="roleId">
                        <label for="checkrads_project_admin">{{'MEMBER.PROJECT_ADMIN' | translate}}</label>
                    </clr-radio-wrapper>
                    <clr-radio-wrapper>
                        <input clrRadio type="radio" name="member_role" id="checkrads_project_maintainer" [value]=4 [(ngModel)]="roleId">
                        <label for="checkrads_project_maintainer">{{'MEMBER.PROJECT_MAINTAINER' | translate}}</label>
                    </clr-radio-wrapper>
                    <clr-radio-wrapper>
                        <input clrRadio type="radio" name="member_role" id="checkrads_developer" [value]=2 [(ngModel)]="roleId">
                        <label for="checkrads_developer">{{'MEMBER.DEVELOPER' | translate}}</label>
                    </clr-radio-wrapper>
                    <clr-radio-wrapper>
                        <input clrRadio type="radio" name="member_role" id="checkrads_guest" [value]=3 [(ngModel)]="roleId">
                        <label for="checkrads_guest">{{'MEMBER.GUEST' | translate}}</label>
                    </clr-radio-wrapper>
                    <clr-radio-wrapper>
                        <input clrRadio type="radio" name="member_role" id="checkrads_limited_guest" [value]=5 [(ngModel)]="roleId">
                        <label for="checkrads_limited_guest">{{'MEMBER.LIMITED_GUEST' | translate}}</label>
                    </clr-radio-wrapper>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
        <button [clrLoading]="btnStatus" type="button" class="btn btn-primary" [disabled]="!isValid()" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
    </div>
</clr-modal>
