<form
    [formGroup]="imageNameForm"
    class="clr-form clr-form-horizontal"
    (mouseleave)="leaveProjectInput()">
    <div class="clr-form-control">
        <label class="required clr-control-label">{{
            'PROJECT.NAME' | translate
        }}</label>
        <div
            class="clr-control-container"
            [class.clr-error]="
                (projectName.invalid &&
                    (projectName.dirty || projectName.touched)) ||
                notExist
            ">
            <div class="clr-input-wrapper">
                <input
                    type="text"
                    id="project-name"
                    class="clr-input w-90"
                    (keyup)="validateProjectName()"
                    formControlName="projectName"
                    autocomplete="off" />
                <clr-icon
                    class="clr-validate-icon"
                    shape="exclamation-circle"></clr-icon>
                <span
                    class="spinner spinner-inline"
                    [hidden]="!checkingName"></span>
                <div
                    class="selectBox"
                    [style.display]="
                        selectedProjectList.length ? 'block' : 'none'
                    ">
                    <ul>
                        <li
                            *ngFor="let project of selectedProjectList"
                            (click)="selectedProjectName(project?.name)">
                            {{ project?.name }}
                        </li>
                    </ul>
                </div>
            </div>
            <clr-control-error
                *ngIf="
                    (projectName.invalid &&
                        (projectName.dirty || projectName.touched)) ||
                    notExist
                "
                class="tooltip-content">
                <ng-container *ngIf="projectName.invalid">
                    {{ 'PROJECT.NAME_TOOLTIP' | translate }}
                </ng-container>
                <ng-container *ngIf="notExist">
                    {{ 'REPLICATION.NO_PROJECT_INFO' | translate }}
                </ng-container>
            </clr-control-error>
        </div>
    </div>
    <div class="clr-form-control">
        <label class="required clr-control-label">{{
            'REPOSITORY.REPO_NAME' | translate
        }}</label>
        <div
            class="clr-control-container"
            [class.clr-error]="
                repoName.invalid && (repoName.dirty || repoName.touched)
            ">
            <div class="clr-input-wrapper">
                <input
                    type="text"
                    id="repo-name"
                    class="clr-input w-90"
                    formControlName="repoName"
                    autocomplete="off" />
                <clr-icon
                    class="clr-validate-icon"
                    shape="exclamation-circle"></clr-icon>
            </div>
            <clr-control-error
                *ngIf="repoName.invalid && (repoName.dirty || repoName.touched)"
                class="tooltip-content">
                {{ 'RETAG.TIP_REPO' | translate }}
            </clr-control-error>
        </div>
    </div>
</form>
