<clr-modal
    [(clrModalOpen)]="addGroupOpened"
    [clrModalStaticBackdrop]="staticBackdrop"
    [clrModalClosable]="closable">
    <h3 class="modal-title">{{ 'GROUP.NEW_MEMBER' | translate }}</h3>
    <div class="modal-body">
        <inline-alert class="modal-title"></inline-alert>
        <label>{{ 'GROUP.NEW_USER_INFO' | translate }}</label>
        <form #groupForm="ngForm" class="clr-form clr-form-horizontal">
            <div class="clr-form-control">
                <label class="required clr-control-label"
                    >{{ 'GROUP.GROUP' | translate }}
                    {{ 'GROUP.NAME' | translate }}</label
                >
                <div
                    class="clr-control-container"
                    [class.clr-error]="
                        (groupName.invalid &&
                            (groupName.touched || groupName.dirty)) ||
                        !isGroupNameValid
                    ">
                    <div class="clr-input-wrapper" (mouseleave)="leaveInput()">
                        <input
                            class="clr-input"
                            type="text"
                            id="group-name"
                            [(ngModel)]="memberGroup.group_name"
                            name="groupName"
                            #groupName="ngModel"
                            required
                            autocomplete="off"
                            (keyup)="input()" />
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                        <span
                            class="spinner spinner-inline"
                            [hidden]="!checkOnGoing"></span>
                        <div
                            class="selectBox"
                            [style.display]="
                                searchedGroups.length ? 'block' : 'none'
                            ">
                            <ul>
                                <li
                                    *ngFor="let group of searchedGroups"
                                    (click)="selectGroup(group.group_name)">
                                    {{ group.group_name }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <clr-control-error
                        *ngIf="
                            (groupName.invalid &&
                                (groupName.touched || groupName.dirty)) ||
                            !isGroupNameValid
                        "
                        class="tooltip-content">
                        {{ groupTooltip | translate }}
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control">
                <label class="clr-control-label">{{
                    'GROUP.ROLE' | translate
                }}</label>
                <div class="clr-control-container">
                    <clr-radio-wrapper *ngFor="let projectRoot of projectRoots">
                        <input
                            clrRadio
                            type="radio"
                            name="member_role"
                            id="{{ 'check_root_project_' + projectRoot.NAME }}"
                            [value]="projectRoot.VALUE"
                            [(ngModel)]="roleId" />
                        <label
                            for="{{ 'check_root_project_' + projectRoot.NAME }}"
                            >{{ projectRoot.LABEL | 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>
