<clr-modal [(clrModalOpen)]="createProjectOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
    <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
    <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
    <div class="modal-body" style="height: 16.8em; overflow-y: hidden;">
        <form #projectForm="ngForm">
            <section class="form-block">
                <div class="form-group" style="padding-left: 135px;">
                    <label for="create_project_name" class="col-md-3 form-group-label-override required">{{'PROJECT.NAME' | translate}}</label>
                    <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
            <input type="text" id="create_project_name"  [(ngModel)]="project.name" 
            name="create_project_name" size="36" 
            required
            pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
            minlength="2" 
            #projectName="ngModel" 
            (keyup)='handleValidation()'>
            <span class="tooltip-content">
              {{ nameTooltipText | translate }}
            </span>
          </label>
                    <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
                </div>
                <div class="form-group" style="padding-left: 135px;">
                    <label class="col-md-4 form-group-label-override">{{'PROJECT.ACCESS_LEVEL' | translate}}</label>
                    <div class="checkbox-inline">
                        <input type="checkbox" id="create_project_public" [(ngModel)]="project.public" name="public">
                        <label for="create_project_public"></label>
                        <span class="access-level-label">{{ accessLevelDisplayText | translate}}</span>
                        <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-bottom-right" style="top:-8px; left:-8px;">
                            <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                            <span class="tooltip-content" style="margin-left: 5px;">{{'PROJECT.INLINE_HELP_PUBLIC' | translate }}</span>
                        </a>
                    </div>
                </div>
            </section>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
        <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
    </div>
</clr-modal>