<div class="mc-page">

    <app-mc-page-header (exit)="goToHome();">
    </app-mc-page-header>

    <div class="mc-page-body container">
        <div class="mc-card position-relative">
            <app-overlay [isActive]="isLoading"></app-overlay>

            <div class="mc-page-body-heading">Jobs</div>

            <div class="d-flex justify-content-end">
                <button class="mc-btn-primary" pButton routerLink="/my-career-web/jobs/new" label="Add Job"></button>
            </div>

            <div class="d-flex justify-content-end mt-3" style="margin-right: 40px;">
                <span style="margin-right: 20px;">Include Completed Jobs:</span>
                <p-inputSwitch [(ngModel)]="includeCompleted" (onChange)="getJobApplicants()"></p-inputSwitch>

            </div>

            <div class="applicant-jobs">
                <div class="applicant-job" *ngIf="applicantJobs.length === 0">
                    <div class="applicant-job-title text-center" style="flex: 1;">No jobs found. </div>
                </div>

                <div class="applicant-job" *ngFor="let applicantJob of applicantJobs;">
                    <div class="applicant-job-title">{{applicantJob.JobTitle}} - {{applicantJob.Employer}} </div>
                    <div class="applicant-job-status">{{applicantJob?.JobStatus?.Description || '-'}}</div>
                    <button class="mc-btn-secondary" pButton label="Edit" routerLink="/my-career-web/jobs/{{applicantJob.ObjectID}}"></button>
                </div>

            </div>

        </div>
    </div>
</div>
