<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">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>
    <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>

<!--        <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">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>-->


        <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">

<!--            <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 why to upgrade.</div>-->
<!--                    <div class="feature-action">Get this feature</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>-->


            <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>
