<div class="assessment-wrapper row">

    <div class="col-12" style="padding: 0;">
        <div class="assessment-header">
            <div class="header-logo" *ngIf="!isMobileView">
                <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
            </div>

            <div class="header-actions">
                <span class="auto-saved">Auto saved 1 min ago</span>

                <button [disabled]="isExiting" pButton label="Save & exit" (click)="exit()" class="ui-button-info"></button>
            </div>
        </div>
        <p-progressBar [value]="20"></p-progressBar>

        <div class="assessment-body container position-relative">

            <app-overlay [isActive]="isLoading"></app-overlay>

            <div class="assessment-body-header">
                <div class="assessment-heading">Career History</div>
            </div>

            <div class="assessment-body-description">
                Fill out each of these sections to complete your profile and start job hunting.
            </div>


            <div class="assessment-body-tabs mc-card career-builder position-relative" *ngIf="careerProfile">
                <p-tabView (onChange)="tabChanged($event)">
                    <p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.PERSONAL_DATA ? 'completed' : ''">
                        <app-personal-details (careerProfileLoaded)="careerProfileUpdated($event)" #personalDetailsComponent [asChildComponent]="true" (detailsSaved)="tabChanged({index: 1})" *ngIf="activeTab === 'personal-data'">
                        </app-personal-details>
                    </p-tabPanel>
                    <p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.WORK_HISTORY ? 'completed' : ''">
                        <app-work-history (careerProfileLoaded)="careerProfileUpdated($event)" #workHistoryComponent (workSaved)="tabChanged({index: 2})" *ngIf="activeTab === 'work-history'">
                        </app-work-history>
                    </p-tabPanel>
                    <p-tabPanel header="3{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.EDUCATION ? 'completed' : ''">
                        <app-education (careerProfileLoaded)="careerProfileUpdated($event)" #educationComponent (educationSaved)="tabChanged({index: 3})" *ngIf="activeTab === 'education'">
                        </app-education>
                    </p-tabPanel>
                    <p-tabPanel header="4{{isMobileView ? '' : '. Skills'}}" [selected]="activeTab === 'skills'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.SKILLS ? 'completed' : ''">
                        <app-skills (careerProfileLoaded)="careerProfileUpdated($event)" #skillsComponent (skillsSaved)="tabChanged({index: 4})" *ngIf="activeTab === 'skills'">
                        </app-skills>
                    </p-tabPanel>
                    <p-tabPanel header="5{{isMobileView ? '' : '. References'}}" [selected]="activeTab === 'references'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.REFERENCES ? 'completed' : ''">
                        <app-references (careerProfileLoaded)="careerProfileUpdated($event)" #referencesComponent (refereeSaved)="tabChanged({index: 5})" *ngIf="activeTab === 'references'">
                        </app-references>
                    </p-tabPanel>
                    <p-tabPanel header="6{{isMobileView ? '' : '. Templates'}}" [selected]="activeTab === 'templates'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.TEMPLATES ? 'completed' : ''">
                        <app-templates (careerProfileLoaded)="careerProfileUpdated($event)" *ngIf="activeTab === 'templates'" (templateSaved)="tabChanged({index: 6})">
                        </app-templates>
                    </p-tabPanel>
                        <p-tabPanel header="7{{isMobileView ? '' : '. Publish'}}" [selected]="activeTab === 'publish'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.PUBLISH ? 'completed' : ''">
                        <app-publish (careerProfileLoaded)="careerProfileUpdated($event)" [asChild]="true" *ngIf="activeTab === 'publish'">
                        </app-publish>
                    </p-tabPanel>
                </p-tabView>
            </div>
        </div>
    </div>

</div>
