<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 ? '' : '. Templates'}}" [selected]="activeTab === 'templates'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.TEMPLATES ? 'completed' : ''">
                        <app-templates></app-templates>
                    </p-tabPanel>
                    <p-tabPanel header="2{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.PERSONAL_DATA ? 'completed' : ''">
                        <app-personal-details #personalDetailsComponent [asChildComponent]="true" (detailsSaved)="tabChanged({index: 2})">
                        </app-personal-details>
                    </p-tabPanel>
                    <p-tabPanel header="3{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.WORK_HISTORY ? 'completed' : ''">
                        <app-work-history #workHistoryComponent (workSaved)="tabChanged({index: 3})">
                        </app-work-history>
                    </p-tabPanel>
                    <p-tabPanel header="4{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.EDUCATION ? 'completed' : ''">
                        <app-education #educationComponent (educationSaved)="tabChanged({index: 4})"></app-education>
                    </p-tabPanel>
                    <p-tabPanel header="5{{isMobileView ? '' : '. Skills'}}" [selected]="activeTab === 'skills'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.SKILLS ? 'completed' : ''">
                        <app-skills #skillsComponent (skillsSaved)="tabChanged({index: 5})"></app-skills>
                    </p-tabPanel>
                    <p-tabPanel header="6{{isMobileView ? '' : '. References'}}" [selected]="activeTab === 'references'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.REFERENCES ? 'completed' : ''">
                        <app-references #referencesComponent (refereeSaved)="tabChanged({index: 6})"></app-references>
                    </p-tabPanel>
                    <p-tabPanel header="7{{isMobileView ? '' : '. Publish'}}" [selected]="activeTab === 'publish'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.PUBLISH ? 'completed' : ''">
                        <app-publish></app-publish>
                    </p-tabPanel>
                </p-tabView>
            </div>
        </div>
    </div>

</div>
