lms-app/src/app/tabs/home/home.component.html

<div class="page-container" detect-scroll (onScroll)="handleScroll($event)">
    <header class="header-bar">
        <button [routerLink]="['/calendar']"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/calendar.svg"></svg-icon> </button>
        <button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bell.svg"></svg-icon> </button>
    </header>

    <section class="video-section" [ngClass]="{'expand' : expandVideo }">
        <iframe *ngIf="showVideo" src="https://player.vimeo.com/video/393975453?title=0&portrait=0&byline=0&autoplay=1" frameborder="0"></iframe>

        <div class="topic-name" *ngIf="classList.length > 0">
            <h2> {{ classList[0].classes[0].subject }} </h2>
            <p> Starts in </p>
            <div class="counter"> 00 : 00 : 0{{ secondsCounter }} </div>
            <div class="checkbox-holder" (click)="joinAutomatically = !joinAutomatically"
            *ngIf="secondsCounter > 0">
                <div class="checkbox" [ngClass]="{'active' : joinAutomatically }">
                    <span> &#10003; </span>
                </div>
                <p> Join in automatically </p>
            </div>
        </div>

        <span class="tutor">
            <p class="description">
                <label> Living things: Chapter 2 </label>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi animi cum numquam sunt, eveniet dolorum tempora. Asperiores porro accusamus similique animi, recusandae corporis, reprehenderit at ab ipsam provident et tenetur.
            </p>
            <div class="profile-holder">
                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                <span> {{ classList[0].classes[0].teacher.name }} </span>
            </div>
            <button (click)="showVideo = true" *ngIf="demoType === 'Teacher' && hasLive" class="go-live-button"> Go Live </button>
            <button (click)="showVideo = true" *ngIf="demoType === 'Student' && hasLive" class="go-live-button"> Join </button>
        </span>
    </section>

    <section class="session-details" [ngClass]="{'expand' : expandVideo }">
        <button class="show-details-button" (click)="showClassDetails  = !showClassDetails "
        [ngClass]="{'active' : showClassDetails }">
            <span>
                <span *ngIf="!showClassDetails"> Show </span>
                <span *ngIf="showClassDetails"> Hide </span>
                Class Details
            </span>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
        </button>

        <div class="details-holder" *ngIf="showClassDetails">
            <section class="segments">
                <button [ngClass]="{'active' : selectedSegment === 'transcript' }"
                (click)="selectedSegment = 'transcript'"> Transcript </button>
                <button [ngClass]="{'active' : selectedSegment === 'resources' }"
                (click)="selectedSegment = 'resources'"> Resources </button>
            </section>

            <section class="transcript" *ngIf="selectedSegment === 'transcript'">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quod, tempora ratione porro architecto non sequi accusamus delectus id ipsam dolores incidunt quam necessitatibus magnam laboriosam neque, unde odio cumque.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores voluptas voluptate maxime eos aspernatur recusandae, est reprehenderit quia, temporibus deleniti repellat mollitia. At aut quas veniam, quasi, aperiam quidem aliquid!
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus consectetur minima eligendi, velit repudiandae laudantium enim. Omnis tempore reprehenderit, quo laboriosam perferendis eligendi quia, rem est in consequuntur excepturi. Provident!
                </p>
            </section>

            <ul class="resources-list" *ngIf="selectedSegment === 'resources'">
                <a href="http://africau.edu/images/default/sample.pdf" target="_blank">
                    <li>
                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
                        <div class="content">
                            <label> Resource 1 </label>
                            <p>
                                quidem minima dolor delectus optio, dicta.
                            </p>
                        </div>
                        <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                    </li>
                </a>

                <a href="https://www.ieee.org/publications/periodicals.html" target="_blank">
                    <li>
                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
                        <div class="content">
                            <label> Resource 1 </label>
                            <p>
                                quidem minima dolor delectus optio, dicta.
                            </p>
                        </div>
                        <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                    </li>
                </a>

                <a href="http://africau.edu/images/default/sample.pdf" target="_blank">
                    <li>
                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
                        <div class="content">
                            <label> Resource 2 </label>
                            <p>
                                quidem minima dolor delectus optio, dicta.
                            </p>
                        </div>
                        <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                    </li>
                </a>
            </ul>
        </div>
    </section>

    <div class="card-list-holder" *ngIf="!showClassDetails">
        <div class="card-list" *ngFor="let class of classList">
            <header>
                <h5> {{ class.date }} </h5>
            </header>
            <app-class-card-list (cardEvents)="getCardEvent($event)" [hasLive]="hasLive" [classes]="class.classes"></app-class-card-list>
        </div>
    </div>

</div>