<div class="mc-page">

    <div class="mc-page-header">
        <div class="mc-page-header-logo">
            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
        </div>
    </div>

    <div class="mc-page-body container">
        <form #form="ngForm" class="mc-card position-relative">
            <app-overlay [isActive]="isLoading"></app-overlay>

            <h4>Introduction Letter for {{introductionLetter.JobTitle || '-' }} at {{introductionLetter.Employer || '-'}} </h4>
            <h6 class="mt-2">Provide details of for the Introduction letter</h6>

            <div class="row">

                <div class="col-md-6 form-group">
                    <label>Job Title</label>
                    <app-form-control>
                        <input type="text" class="form-control" placeholder="Job Title" required name="JobTitle"
                               [(ngModel)]="introductionLetter.JobTitle">
                    </app-form-control>
                </div>

                <div class="col-md-6 form-group">
                    <label>Employer</label>
                    <app-form-control>
                        <input type="text" class="form-control" placeholder="Employer" required name="Employer"
                               [(ngModel)]="introductionLetter.Employer">
                    </app-form-control>
                </div>

                <div class="col-md-6 form-group">
                    <label>Contact Name</label>
                    <app-form-control>
                        <input type="text" class="form-control" placeholder="Contact Name" required name="ContactName"
                               [(ngModel)]="introductionLetter.ContactName">
                    </app-form-control>
                </div>

            </div>

            <div class="row position-relative">
                <app-overlay [isActive]="isLoadingSkillAndExp"></app-overlay>
                <div class="col-md-6 mc-exp-table">
                    <h5>Work Experience</h5>
                    <p-table [columns]="[]" [value]="introductionLetter.WorkExperiences" [reorderableColumns]="true">
                        <ng-template pTemplate="body" let-ILWorkExperience let-columns="columns" let-index="rowIndex">
                            <tr [pReorderableRow]="index">
                                <td>
                                    <div class="exp-row">
                                        <i class="fa fa-bars" pReorderableRowHandle></i>

                                        <!-- @CodeReview : A004 : break line, if it's going out of view (whenever possible) -->
                                        <p-checkbox  [binary]="true" [(ngModel)]="ILWorkExperience.IsSelected" name="EXP{{index}}" [label]="ILWorkExperience?.WorkExperience?.ActualJobTitle + ' - ' + ILWorkExperience?.WorkExperience?.Employer"></p-checkbox>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>

                <div class="col-md-6 mc-skill-table">
                    <h5>Skills</h5>
                    <p-table [columns]="[]" [value]="introductionLetter.Skills" [reorderableColumns]="true">
                        <ng-template pTemplate="body" let-ILSkill let-columns="columns" let-index="rowIndex">
                            <tr [pReorderableRow]="index">
                                <td>
                                    <div class="skill-row">
                                        <i class="fa fa-bars" pReorderableRowHandle></i>
                                        <p-checkbox [binary]="true" [(ngModel)]="ILSkill.IsSelected" name="SKILLS{{index}}" [label]="ILSkill?.Skill?.Description"></p-checkbox>
                                    </div>
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-md-6">
                    <button pButton style="min-width: 180px;" label="Download" class="mc-btn-secondary" (click)="getIntroLetter(true)" *ngIf="isEditMode"></button>
                </div>
                <div class="col-md-6 d-flex justify-content-end">
                    <button (click)="saveIntroLetter()" pButton label="Update" class="mc-btn-primary" [disabled]="isLoading"></button>
                </div>
            </div>

        </form>
    </div>
</div>
