<app-employee-search-bar title="My Interests"></app-employee-search-bar>
<div class="tiles-container">
    <mat-grid-list cols="4" rowHeight="53px" gutterSize="20px">
        <mat-grid-tile *ngFor="let category of courseCategories">
            <div class="col-xs-10 tile-title">{{ category.courseCategory }}</div>
        </mat-grid-tile>
    </mat-grid-list>
</div>

<h1>Choose some courses of your interest</h1>
<h2>Recommended Courses</h2>
<app-slider [valueStep]='300'>
    <app-employee-course-card class="course-selection" [class.selected]="course.selected" [showGoto]="course.selected" [shoCount]="shoCount" [class.selected]="course.selected" (click)="selectCourse(course)" *ngFor="let course of courses; let shoCount = index"
        [course]="course"></app-employee-course-card>
    <!-- to be emited from child   (selectCourseEvent)="selectCourse(course)" -->
</app-slider>