lms-app/src/app/tabs/courses/details/details.component.html

<div class="page">
    <section class="upfold">
        <button class="close-button" (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>

        <h3> {{ heading }} </h3>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Earum rerum itaque, autem voluptatibus, quia, consectetur quasi blanditiis.
        </p>
        <label> 21 Chapters to finish </label>
    </section>

    <div class="progress-holder"> <span class="progress"></span> </div>

    <header class="segment-header">
        <button (click)="selectedSegment='home'"
        [ngClass]="{'active': selectedSegment === 'home' }"> Home </button>
        <button (click)="selectedSegment='resources'"
        [ngClass]="{'active': selectedSegment === 'resources' }"> Resources </button>
        <button (click)="selectedSegment='grades'"
        [ngClass]="{'active': selectedSegment === 'grades' }"> Grades </button>
        <button (click)="selectedSegment='forum'"
        [ngClass]="{'active': selectedSegment === 'forum' }"> Forum </button>
    </header>

    <div class="segments-holder">

        <ul class="chapter-list" *ngIf="selectedSegment === 'home'">
            <section class="test-prompt">
                <section class="prompt">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
                    </p>
                    <button> Take the test now! </button>
                </section>
            </section>

            <li class="chapter completed" [ngClass]="{'active' : selectedChapter === 1}">
                <div class="container" (click)="selectedChapter === 1? selectedChapter = null : selectedChapter = 1">
                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                    <div class="chapter-heading">
                        <label> Chapter 1 </label>
                        <p> 5 Topics </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                </div>
                <ul class="topic-list">
                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-3']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="chapter" [ngClass]="{'active' : selectedChapter === 2}">
                <div class="container" (click)="selectedChapter === 2 ? selectedChapter = null : selectedChapter = 2">
                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                    <div class="chapter-heading">
                        <label> Chapter 2 </label>
                        <p> 5 Topics </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                </div>
                <ul class="topic-list">
                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="topic" [routerLink]="['/video-chapter/', 'Topic-3']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
                        </div>
                    </li>

                    <li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                        <div class="topic-container">
                            <p>
                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                            </p>
                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>

        <ul class="resources-list" *ngIf="selectedSegment === 'resources'">
            <header> Chapter 1 </header>
            <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>


            <header> Chapter 2 </header>
            <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>


        <section class="forum-details" *ngIf="selectedSegment === 'forum'">
            <section class="add-post">
                <textarea placeholder="Start a discussion"></textarea>
                <div class="input-holder">
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/hashtag.svg"></svg-icon>
                    <input type="text" placeholder="Hashtag">
                </div>
                <div class="input-holder">
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add-person.svg"></svg-icon>
                    <input type="text" placeholder="Tag person">
                </div>
                <div class="input-holder">
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
                    <input type="text" placeholder="URL">
                </div>
                <div class="input-holder">
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
                    <input type="file">
                </div>
                <button class="add-post-button"> Add Post </button>
            </section>

            <ul class="forum-post-list">
                <li class="post" [ngClass]="{'active': selectedPost === 1 }">
                    <button class="book-mark-button">
                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
                    </button>
                    <div (click)="selectedPost = 1">
                        <h5>
                            Can anyone explain dark matter radiation theory in a most simplest
                            way possible?
                        </h5>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente earum at alias aliquam voluptates, cupiditate nobis. Beatae iure mollitia sunt similique omnis blanditiis rerum impedit. Soluta unde amet officia molestiae!
                        </p>
                    </div>
                    <div class="author">
                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                        <label> Dwayne the Rock </label>
                        <span class="time-stamp"> August 15, 2020 </span>
                    </div>
                    <div class="action-buttons">
                        <button>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                            <span> 56 </span>
                        </button>
                        <button>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
                            <span> 56 </span>
                        </button>
                        <button>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
                            <span> 56 </span>
                        </button>

                        <button class="more-button" (click)="showMorePostOptions = true">
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                        </button>
                    </div>

                    <ul class="comment-list">
                        <button class="add-comment-button" (click)="showAddCommentToPost = true">
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
                            ADD A COMMENT
                        </button>
                        <li class="comment">
                            <div class="author">
                                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                                <label> Dwayne the Rock </label>
                                <span class="time-stamp"> August 15, 2020 </span>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                            </p>
                            <div class="action-buttons">
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                                    <span> Reply </span>
                                </button>
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                                    <span> 56 </span>
                                </button>

                                <button class="more-button">
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                                </button>
                            </div>
                        </li>

                        <li class="comment">
                            <div class="author">
                                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                                <label> Dwayne the Rock </label>
                                <span class="time-stamp"> August 15, 2020 </span>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                            </p>
                            <div class="action-buttons">
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                                    <span> Reply </span>
                                </button>
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
                                    <span> 56 </span>
                                </button>

                                <button class="more-button">
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                                </button>
                            </div>
                        </li>
                    </ul>
                </li>

                <li class="post" [ngClass]="{'active': selectedPost === 2 }">
                    <button class="book-mark-button">
                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
                    </button>
                    <div (click)="selectedPost = 2">
                        <h5>
                            Can anyone explain dark matter radiation theory in a most simplest
                            way possible?
                        </h5>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente earum at alias aliquam voluptates, cupiditate nobis. Beatae iure mollitia sunt similique omnis blanditiis rerum impedit. Soluta unde amet officia molestiae!
                        </p>
                    </div>
                    <div class="author">
                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                        <label> Dwayne the Rock </label>
                        <span class="time-stamp"> August 15, 2020 </span>
                    </div>
                    <div class="action-buttons">
                        <button>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                            <span> 56 </span>
                        </button>
                        <button>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
                            <span> 56 </span>
                        </button>
                        <button>
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
                            <span> 56 </span>
                        </button>

                        <button class="more-button" (click)="showMorePostOptions = true">
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                        </button>
                    </div>

                    <ul class="comment-list">
                        <button class="add-comment-button" (click)="showAddCommentToPost = true">
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
                            ADD A COMMENT
                        </button>
                        <li class="comment">
                            <div class="author">
                                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                                <label> Dwayne the Rock </label>
                                <span class="time-stamp"> August 15, 2020 </span>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                            </p>
                            <div class="action-buttons">
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                                    <span> Reply </span>
                                </button>
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                                    <span> 56 </span>
                                </button>

                                <button class="more-button">
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                                </button>
                            </div>
                        </li>

                        <li class="comment">
                            <div class="author">
                                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                                <label> Dwayne the Rock </label>
                                <span class="time-stamp"> August 15, 2020 </span>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                            </p>
                            <div class="action-buttons">
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                                    <span> Reply </span>
                                </button>
                                <button>
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
                                    <span> 56 </span>
                                </button>

                                <button class="more-button">
                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                                </button>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>

            <section class="more-options-slideup" [ngClass]="{'active' : showMorePostOptions }">
                <header>
                    <h4> More Options </h4>
                    <button class="close-button" (click)="showMorePostOptions = false">
                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
                    </button>
                </header>
                <ul>
                    <li>
                        Downvote Answer
                    </li>
                    <li>
                        Downvote Question
                    </li>
                    <li>
                        Report
                    </li>
                </ul>
            </section>


            <section class="more-options-slideup" [ngClass]="{'active' : showAddCommentToPost }">
                <header>
                    <h4> Add Comment </h4>
                    <button class="close-button" (click)="showAddCommentToPost = false">
                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
                    </button>
                </header>
                <textarea placeholder="Type your comment..."></textarea>
                <button class="post-comment-button"> Submit </button>
            </section>
        </section>
    </div>

</div>