lms-app/src/app/reusable-components/class-card-list/class-card-list.component.html

<ul class="subject-list">
    <li *ngFor="let class of classes" [ngClass]="{'late' : class.attendanceStatus && class.attendanceStatus === 'LATE',
    'attended' : class.attendanceStatus && class.attendanceStatus === 'PRESENT',
    'absent' : class.attendanceStatus && class.attendanceStatus === 'ABSENT',
    'ripple' : class.isLive, 'disable' : hasLive && !class.isLive }">
        <div class="schedule">
            <label> {{ class.time }} </label>
            <p> {{ class.duration }} </p>
        </div>
        <div class="subject">
            <label> {{ class.subject }} </label>
            <p class="status">
                <span *ngIf="class.attendanceStatus && class.attendanceStatus === 'PRESENT'"> Present </span>
                <span *ngIf="class.attendanceStatus && class.attendanceStatus === 'ABSENT'"> Absent </span>
                <span *ngIf="class.attendanceStatus && class.attendanceStatus === 'LATE'"> 10 Mins late </span>
            </p>
            <p *ngIf="class.teacher.name !== 'You'">
                <img [src]="class.teacher.profile_image">
                <span> {{ class.teacher.name }} </span>
            </p>
            <p *ngIf="class.classLevel">
                {{ class.classLevel }}
            </p>
        </div>
        <span *ngIf="class.classUrl">
            <button class="view-button"
            [routerLink]="[class.classUrl, class.classId]">
                Watch
            </button>
        </span>
    </li>
</ul>