<div class="home-wrapper position-relative" *ngIf="!isMobileView">
    <app-overlay [isActive]="isLoading"></app-overlay>
    <div class="home-header">
        <div class="home-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</div>
        <div class="home-header-card">
            <div class="home-header-card-content">
                We need some information from you so you can fill out your career profile and get job hunting.
            </div>
            <div class="home-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</div>
        </div>
    </div>
    <div class="home-body">

<!--        <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">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" *ngIf="selectedMobileTab === 'dashboard'">

        <div class="home-mobile-header">
            <div class="mobile-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</div>
            <div class="mobile-header-card">
                We need some information from you so you can fill out your career profile and get job hunting.
                <div class="mobile-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</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" *ngIf="selectedMobileTab === 'tasks'">
        <app-profile-tasks></app-profile-tasks>
    </div>

</div>
