<div class="home-wrapper position-relative" *ngIf="!isMobileView">
    <app-overlay [isActive]="isLoading"></app-overlay>
    <div class="home-header">

        <div class="home-header-heading">
            <span *ngIf="careerProfile?.Candidate?.IsFirstTime">
                <ng-container *ngIf="careerProfile?.Candidate?.User?.FirstName">
                    Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.
                </ng-container>
                <ng-container *ngIf="!careerProfile?.Candidate?.User?.FirstName">
                    Hey, Welcome to Matchd Career.
                </ng-container>
            </span>
            <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Hi {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome back.</span>
        </div>

    </div>
    <div class="home-body">

        <div class="home-body-card">

            <div class="home-body-card-content">
                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.text}}</span>
                <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection?.firstTime">{{contentSection?.firstTime}}</span>
            </div>

            <div class="home-body-card-action" [routerLink]="activeSection?.link">
                <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection.firstTimeBtn">{{contentSection?.firstTimeBtn}}</span>
                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.button}}</span>
            </div>

        </div>

        <ng-container *ngIf="careerProfile?.CompletedPercentageWP === 100 && careerProfile?.CompletedPercentageWS === 100">

            <div class="home-body-heading">
                Get to know yourself
            </div>

            <div class="home-body-extra-features" style="min-height: 240px;">
                <div class="extra-feature">
                    <div class="feature-heading">Development Reports</div>
                    <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
                    <div class="feature-action" routerLink="/my-career-web/dashboard/summary-report">View my summary report</div>
                </div>
                <div class="extra-feature-image" style="position: relative;">
                    <img src="assets/my-career-web/svgs/summary-report.svg" style="position: absolute; top: -54px; right: -26px;">
                </div>
            </div>

        </ng-container>



        <div class="home-body-heading">
            Don’t miss out on these extra features
        </div>

        <div class="home-body-extra-features">
            <div class="extra-feature">
                <div class="feature-heading">Manage Jobs</div>
                <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
                <div class="feature-action">Get this feature</div>
            </div>
            <div class="extra-feature">
                <div class="feature-heading">Find Job Fit</div>
                <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
                <div class="feature-action">Get this feature</div>
            </div>
            <div class="extra-feature">
                <div class="feature-heading" style="white-space: nowrap;">Development Reports</div>
                <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
                <div class="feature-action">Get this feature</div>
            </div>
        </div>
    </div>
</div>










<!--    Mobile View -->
<div class="home-mobile-wrapper position-relative" *ngIf="isMobileView">
    <app-overlay [isActive]="isLoading"></app-overlay>
    <div class="home-mobile-tabs">
        <div class="home-mobile-tab" [ngClass]="{selected: selectedMobileTab === 'dashboard'}" (click)="selectedMobileTab = 'dashboard'">Dashboard</div>
        <div class="home-mobile-tab" [ngClass]="{selected: selectedMobileTab === 'tasks'}" (click)="selectedMobileTab = 'tasks'">Tasks</div>
    </div>

    <div class="mobile-tab-content" [hidden]="selectedMobileTab !== 'dashboard'">

        <div class="home-mobile-header">

            <div class="mobile-header-heading">
                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</span>
                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Hi {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome back.</span>
            </div>

            <div class="mobile-header-card">
                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.text}}</span>
                <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection?.firstTime">{{contentSection?.firstTime}}</span>

                <div class="mobile-header-card-action" [routerLink]="activeSection?.link">
                    <span *ngIf="careerProfile?.Candidate?.IsFirstTime && contentSection.firstTimeBtn">{{contentSection?.firstTimeBtn}}</span>
                    <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">{{contentSection?.button}}</span>
                </div>

            </div>

        </div>


        <div class="home-mobile-body">

            <ng-container *ngIf="careerProfile?.CompletedPercentageWP === 100 && careerProfile?.CompletedPercentageWS === 100">

                <div class="mobile-body-heading">
                    Get to know yourself
                </div>

                <div class="home-mobile-body-features">
                    <div class="feature">
                        <div class="feature-heading">Development Reports</div>
                        <div class="feature-content">Information about feature that gives user context as to what value it provides.</div>
                        <div class="feature-action" routerLink="/my-career-web/dashboard/summary-report">View my summary report</div>

                        <div class="extra-feature-image" style="position: relative;">
                            <img src="assets/my-career-web/svgs/summary-report.svg" style="margin-top: 10px;">
                        </div>
                    </div>
                </div>

            </ng-container>


            <div class="mobile-body-heading">
                Don’t miss out on these extra features
            </div>

            <div class="home-mobile-body-features">
                <div class="feature">
                    <div class="feature-heading">Manage Jobs</div>
                    <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
                    <div class="feature-action">Get this feature</div>
                </div>
                <div class="feature">
                    <div class="feature-heading">Find Job Fit</div>
                    <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
                    <div class="feature-action">Get this feature</div>
                </div>
                <div class="feature">
                    <div class="feature-heading">Development Reports</div>
                    <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
                    <div class="feature-action">Get this feature</div>
                </div>
            </div>
        </div>


    </div>


    <div class="mobile-tab-content" [hidden]="selectedMobileTab !== 'tasks'">
        <app-profile-tasks></app-profile-tasks>
    </div>

</div>
