<form [formGroup]="imageNameForm" class="clr-form clr-form-compact" (mouseleave)="leaveProjectInput()">
    <div class="clr-form-control clr-row">
        <label for="project-name" class="required clr-control-label clr-col-xs-12 clr-col-md-4">{{ 'PROJECT.NAME' | translate }}</label>
        <div class="clr-control-container clr-col-xs-12 clr-col-md-8">
            <div class="clr-input-wrapper">
                <label aria-haspopup="true" role="tooltip" class="wrap-label tooltip tooltip-validation tooltip-md tooltip-top-left" [class.invalid]='noProjectInfo'>
                    <input type="text" 
                    id="project-name" 
                    class="clr-input"
                    (keyup)='validateProjectName()'
                    (blur)='blurProjectInput()'
                    formControlName="projectName"/>
                    <span *ngIf="noProjectInfo && (projectName.dirty || projectName.touched)" class="tooltip-content">{{noProjectInfo | translate}}</span>
                </label>
                <div class="select-box" [style.display]="selectedProjectList.length ? 'block' : 'none'">
                    <ul>
                        <li *ngFor="let project of selectedProjectList" (click)="selectedProjectName(project?.name)">{{project?.name}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="clr-form-control clr-row">
        <label for="repo-name" class="required clr-control-label clr-col-xs-12 clr-col-md-4">{{ 'REPOSITORY.REPO_NAME' | translate }}</label>
        <div class="clr-control-container clr-col-xs-12 clr-col-md-8">
            <div class="clr-input-wrapper">
                <label aria-haspopup="true" role="tooltip" class="wrap-label tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='repoName.invalid && (repoName.dirty || repoName.touched)'>
                    <input type="text" id="repo-name" class="clr-input" formControlName="repoName" />
                    <span *ngIf="repoName.invalid && (repoName.dirty || repoName.touched)" class="tooltip-content">{{ 'RETAG.TIP_REPO' | translate }}</span>
                </label>
            </div>
        </div>
    </div>
    <div class="clr-form-control clr-row">
        <label for="tag-name" class="required clr-control-label clr-col-xs-12 clr-col-md-4">{{ 'REPOSITORY.TAG' | translate }}</label>
        <div class="clr-control-container clr-col-xs-12 clr-col-md-8">
            <div class="clr-input-wrapper">
                <label aria-haspopup="true" role="tooltip" class="wrap-label tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='tagName.invalid && (tagName.dirty || tagName.touched)'>
                    <input type="text" id="tag-name" class="clr-input" formControlName="tagName" />
                    <span *ngIf="tagName.invalid && (tagName.dirty || tagName.touched)" class="tooltip-content">{{ 'RETAG.TIP_TAG' | translate }}</span>
                </label>
            </div>
        </div>
    </div>
</form>