lms-app/src/app/tabs/courses/video-chapter/video-chapter.component.html

<div class="page">
    <header class="nav-header">
        <button class="close-button" (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>
        <h5>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
            <span> {{ heading }} </span>
        </h5>
    </header>

    <section class="video-player">
        <button class="play-button">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
        </button>
    </section>

    <section class="segments">
        <button (click)="selectedSegment='transcript'"
        [ngClass]="{'active': selectedSegment === 'transcript' }"> Transcript </button>
        <button (click)="selectedSegment='attachments'"
        [ngClass]="{'active': selectedSegment === 'attachments' }"> Attachments (2) </button>
        <button (click)="selectedSegment='notes'"
        [ngClass]="{'active': selectedSegment === 'notes' }"> Notes (2) </button>
    </section>

    <section class="segment-details">
        <section *ngIf="selectedSegment === 'transcript'" class="transcript">
            <p>
                <span class="highlight"> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> Quis voluptates sint illum dolorem. Non beatae, illum repellendus maxime sunt nulla at inventore odit, voluptate laudantium doloribus. Atque vitae, veritatis aperiam.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita dolores ea facere quae temporibus. Beatae modi voluptates, dolorem, eveniet sed non a quaerat aperiam officiis voluptatibus nemo! Similique, tempora aspernatur.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic nihil molestias perspiciatis reprehenderit, ad adipisci quas nam, minima id vitae dolore impedit iste mollitia quibusdam alias commodi quam qui voluptatibus.
            </p>
        </section>

        <ul class="attachment-list" *ngIf="selectedSegment === 'attachments'">
            <li>
                <div class="content">
                    <label> Attachment 1 </label>
                    <p>
                        quidem minima dolor delectus optio, dicta.
                    </p>
                </div>
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
            </li>

            <li>
                <div class="content">
                    <label> Attachment 2 </label>
                    <p>
                        quidem minima dolor delectus optio, dicta.
                    </p>
                </div>
                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
            </li>
        </ul>

        <ul class="notes-list" *ngIf="selectedSegment === 'notes'">
            <li>
                <div class="content">
                    <label> Notes 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>

            <li>
                <div class="content">
                    <label> Notes 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>

            <li>
                <div class="content">
                    <label> Notes 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>

            <button class="add-notes-button">
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add.svg"></svg-icon>
                <span> SAVE A NOTE </span>
            </button>
        </ul>
    </section>
</div>