<div class="position-relative">
    <app-overlay [isActive]="isLoading || isSaving"></app-overlay>

    <h4 class="tab-heading">Tell us about your Skills</h4>

    <div class="row" style="margin: 24px 0 12px;">
        <div class="col-md-12">
            <span>We have identified the following skills based on your Work experience, Educational qualifications or certification. How would you rate yourself? </span>
        </div>
    </div>

    <form #form="ngForm">

        <div class="row skill-wrapper" *ngFor="let skill of careerProfile?.Skills; let i = index;"
             style="padding-bottom: 16px;">

            <div class="remove-record" (click)="removeSkill(skill)">
                <i class="fa fa-remove"></i>
            </div>

            <div class="col-md-12 form-group">
                <app-form-control *ngIf="skill.IsNew">
                    <p-autoComplete [suggestions]="skills" name="Skill{{i}}" [(ngModel)]="skill.Skill" placeholder="Enter Skill" required
                                    (completeMethod)="getSkills($event)" dataKey="ObjectID" field="Description" [forceSelection]="true">
                    </p-autoComplete>
                </app-form-control>
                <div *ngIf="!skill.IsNew">
                    {{skill?.Skill?.Description}}
                </div>
            </div>

            <div class="col-md-6">
                <app-form-control>
                    <p-selectButton [options]="ratings" name="Rating{{i}}" optionLabel="Description" [(ngModel)]="skill.SkillRating" required>
                    </p-selectButton>
                </app-form-control>
            </div>
            <div class="col-md-8" *ngIf="skill?.Skill">
                <div class="added-frm-text">{{skill?.Skill?.AddedFromWhereText}}</div>
            </div>

        </div>


        <div class="row">
            <div class="col-md-12">
                <button pButton class="btn btn-info-outline add-more" label="Add skill +" (click)="addSkill()"></button>
            </div>
        </div>

    </form>


    <div class="d-flex justify-content-center" style="margin-top: 48px;">
        <button pButton label="Next Section" class="ui-button-info next-section" [disabled]="isSaving" (click)="saveSkill()"></button>
    </div>

</div>
