lms-app/src/app/reusable-components/forum/post-details/post-details.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/comment.svg"></svg-icon>
            <span> Can anyone explain dark matter radiation theory in a most simplest
            way possible? </span>
        </h5>
    </header>

    <h2 class="question">
        Can anyone explain dark matter radiation theory in a most simplest
        way possible?
    </h2>

    <ul class="forum-post-list">
        <header class="post-header"> Top Answer </header>

        <li class="post" [ngClass]="{'active' : selectedAnswer === 1}">
            <button class="book-mark-button">
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
            </button>
            <div (click)="selectedAnswer = 1">
                <h5>
                    It's easy to explain actually
                </h5>
                <p>
                    You just need to refer to the article updated by IEEE Labs.
                </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 class="active">
                    <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>

            <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>

            <ul class="comment-list">
                <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 (click)="showAddCommentToPost = true">
                            <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" (click)="showMorePostOptions = true">
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                        </button>
                    </div>

                    <div class="comment reply-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 class="active">
                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.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>
                    </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 (click)="showAddCommentToPost = true">
                            <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" (click)="showMorePostOptions = true">
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                        </button>
                    </div>
                </li>
            </ul>
        </li>

        <header class="post-header"> Other Answers </header>

        <li class="post" [ngClass]="{'active' : selectedAnswer === 2}">
            <button class="book-mark-button">
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
            </button>
            <div (click)="selectedAnswer = 2">
                <h5>
                    Have you watched the Xenon experiment?
                </h5>
                <p>
                    A spark was created in the lab where there were 56 unknown interactions!!!
                </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 class="active">
                    <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>

            <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>

            <ul class="comment-list">
                <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 (click)="showAddCommentToPost = true">
                            <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" (click)="showMorePostOptions = true">
                            <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 (click)="showAddCommentToPost = true">
                            <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" (click)="showMorePostOptions = true">
                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                        </button>
                    </div>
                </li>
            </ul>
        </li>


        <li class="post" [ngClass]="{'active' : selectedAnswer === 3}">
            <button class="book-mark-button">
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
            </button>
            <div (click)="selectedAnswer = 3">
                <h5>
                    Have you watched the Xenon experiment?
                </h5>
                <p>
                    A spark was created in the lab where there were 56 unknown interactions!!!
                </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>

            <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>

            <ul class="comment-list">
                <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 (click)="showAddCommentToPost = true">
                            <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" (click)="showMorePostOptions = true">
                            <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 (click)="showAddCommentToPost = true">
                            <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" (click)="showMorePostOptions = true">
                            <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>

</div>