{% load static %}
{% load humanize %}
{% load qa_tags %}

{% load crispy_forms_tags %}
<html class="html__responsive html__unpinned-leftnav"><head>

        <title>Review First Questions - Stack Overflow</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script async="" src="https://cdn.sstatic.net/Js/third-party/stacks/stacks.min.js?v=4c00f8ce1b14"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=556e4333f24c">
    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=34c234f84be8">
    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/secondary.css?v=bbf1061b903d">
    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/Channels/channels.css?v=47a5e0f03c81">
    <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />

<style>

    .logo-name {
        padding: 8px;
        color: #568;
        border: 1px solid white;
        font-family: 'Nexa';
        src: url(...);
        font-weight: 500;
        font-style: normal;
    }

    .fa-stack-overflow {
        color: blue;
    }

</style>
</head>
    <body class="review-task-page unified-theme">
    <div id="notify-container"></div>
    <div id="custom-header"></div>
        





<header class="top-bar js-top-bar top-bar__network">
    <div class="wmx12 mx-auto d-flex ai-center h100" role="menubar">
        <div class="-main flex--item">
                <a href="#" class="left-sidebar-toggle p0 ai-center jc-center js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span class="ps-relative"></span></a>
                <div class="topbar-dialog leftnav-dialog js-leftnav-dialog dno">
                    <div class="left-sidebar js-unpinned-left-sidebar" data-can-be="left-sidebar" data-is-here-when="sm"></div>
                </div>
            <a href="{% url 'profile:home' %}" class="-logo">
                <i class="fab fa-stack-overflow fa-3x"></i><div class="logo-name">StackOverFlow-<b>Clone</b></div>
            </a>
        </div>



<div class="toast-container">
</div>


  <span id="message_area">
    {% if messages %}
    {% for message in messages %}
    {% if message.tags == 'error' %}
    <div class="alert alert-danger">{{message|safe}}</div>
    {% else %}
    <div class="alert alert-{{message.tags}}">
    {{message|safe}}</div>
    {% endif %}
    {% endfor %}
    {% endif %}
  </span>



            <form id="search" role="search" action="" class="flex--item fl-grow1 searchbar px12 js-searchbar " autocomplete="off">
                    <div class="ps-relative">
                        <input name="q"
                               type="text"
                               placeholder="Search&#x2026;"
                               value=""
                               autocomplete="off"
                               maxlength="240"
                               class="s-input s-input__search js-search-field "
                               aria-label="Search"
                               aria-controls="top-search" 
                               data-controller="s-popover"
                               data-action="focus->s-popover#show"
                               data-s-popover-placement="bottom-start"/>
                        <svg aria-hidden="true" class="s-input-icon s-input-icon__search svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 112 7a5 5 0 0110 0Z"/></svg>
                        <div class="s-popover p0 wmx100 wmn4 sm:wmn-initial js-top-search-popover" id="top-search" role="menu">
</div>
                    </div>
            </form>





        
        

<ol class="overflow-x-auto ml-auto -secondary d-flex ai-center list-reset h100 user-logged-in" role="presentation">
        <li class="-item searchbar-trigger"><a href="#" class="-link js-searchbar-trigger" role="button" aria-label="Search" aria-haspopup="true" aria-controls="search" title="Click to show search"><svg aria-hidden="true" class="svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 112 7a5 5 0 0110 0Z"/></svg></a></li>



            <li class="-item">
                <a href="{% if request.user.is_authenticated %}{% url 'profile:ActivityTabSummary' user.id user.username %}{% endif %}" class="my-profile js-gps-track" data-gps-track="profile_summary.click()">
<div class="gravatar-wrapper-24" title="Van"><img src="{% if request.user.profile.profile_photo %} {{request.user.profile.profile_photo.url}}{% endif %}" alt="" width="24" height="24" class="bar-sm -avatar js-avatar-me"></div>                        <span class="v-visible-sr">{{request.user.username}}</span>

<div class="-rep js-header-rep" title="your reputation: {{request.user|calculate_reputation}}" aria-hidden="true">{{request.user|calculate_reputation}}</div>
                        <span class="v-visible-sr">, {{request.user|calculate_reputation}} reputation</span>
                            <div class="-badges">
                                    {% if request.user|calculateGoldBadges %}
                                    <span title="{{request.user|calculateGoldBadges}} gold badges" aria-hidden="true">
                                        <span class="badge1">&#9679;</span>
                                        <span class="badgecount">{{request.user|calculateGoldBadges}}</span>
                                    </span>
                                    <span class="v-visible-sr">{{request.user|calculateGoldBadges}} gold badges</span>
                                    {% endif %}

                                    {% if request.user|calculatSilvereBadges %}             
                                    <span title="{{request.user|calculatSilvereBadges}} silver badges" aria-hidden="true">
                                        <span class="badge2">&#9679;</span>
                                        <span class="badgecount">{{request.user|calculatSilvereBadges}}</span>
                                    </span>
                                    <span class="v-visible-sr">{{request.user|calculatSilvereBadges}} silver badges</span> 
                                    {% endif %}

                                    {% if request.user|calculateBronzeBadges %}             
                                    <span title="{{request.user|calculateBronzeBadges}} bronze badges" aria-hidden="true">
                                        <span class="badge3">&#9679;</span>
                                        <span class="badgecount">{{request.user|calculateBronzeBadges}}</span>
                                    </span>
                                    <span class="v-visible-sr">{{request.user|calculateBronzeBadges}} bronze badges</span> 
                                    {% endif %}
                            </div>
                </a>
            </li>
<style>

    .fa, .fas {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600 !important;
}

</style>


        <li class="-item inbox-button-item myInboxSVGOuter thisIsOuter">
            <a class="-link myInboxSVGLink readNotification" data-pk="{{ data.id }}" onClick="openInbox();">
                {% if showAlert %}<span class="button__badge">{{countUnreadNotifications}}</span>{% endif %}
                <i class="fa fa-inbox fa-2x iconInbox myInboxSVG" aria-hidden="true"></i>
                
                <span class="indicator-badge js-unread-count _important d-none">0</span>
            </a>
        </li>

        <li class="-item achievements-button-item achieveSVGOuter achThisIsOuter">
            <a href="#" class="-link readPrivNotification" onclick="openAchievementInbox();">
                <i class="fa fa-trophy fa-2x iconAchievements achieveSVG" aria-hidden="true"></i>
                {% if countUnreadPrivNotifications_1 %}<span class="unseen-reputation">+{{countUnreadPrivNotifications.countTheUnRead_Rep}}</span>{% endif %}
                <span class="indicator-badge js-unread-count _positive d-none">+0</span>
            </a>
        </li>

        {% if request.user.profile.access_review_queues %}
        <li class="-item review-button-item reviewSVGOuter revThisIsOuter">
            <a href="#" class="-link svg-icon iconReviewQueue" onclick="openReviewInbox();">
                <i class="fa fa-tasks fa-2x iconReviewQueue reviewSVG" aria-hidden="true"></i>
            </a>
        </li>
        {% endif %}



</ol>

    </div>
</header>



<!-- NOTIFICATION'S INBOX - START -->

<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""></a>

            <div class="notification_dd">
                <div class="topbar-dialog inbox-dialog dno" role="menu" style="display: block;">

                    <div class="header fw-wrap">
                        <div class="flex--item fl1">
                            <div class="ai-center d-flex jc-end">
                                    <div class="-right">
                                            <a href="#">all items</a>
                                            • <a href="{% url 'users:logout_view' %}">Logout</a>
                                    </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-content">
                        <ul>
                            {% for notification in notifications %}
                            <li class="inbox-item ">
                                <a href="{{notification.url}}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item" title="Stack Overflow"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span class="v-visible-sr">Stack Overflow&nbsp;</span>
                                            {% if notification.type_of_noti == "comment_answer" %}
                                            Comment on Answer
                                            {% elif notification.type_of_noti == "question_comment" %}
                                            Comment on Question
                                            {% elif notification.type_of_noti == "community_message" %}
                                            Community Message
                                            {% elif notification.type_of_noti == "question_edit" %}
                                            Edit Suggessted
                                            {% elif notification.type_of_noti == "question_reopen_voted" %}
                                            Question ReOpen Vote Raises
                                            {% elif notification.type_of_noti == "NEW_ANSWER" %}
                                            New Answer to the Question
                                            {% endif %}

                                            {% if notification.is_read == False %}<b class="unreadDot" style="color: red">Unread</b>{% endif %}

                                            </span>
                                            <span class="item-creation"><span title="2021-10-12 04:36:58Z" class="relativetime">{{notification.date_created|naturaltime}}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            {% if notification.question_noti %}{{notification.question_noti.title}}{% else %}{{notification.answer_noti}}{% endif %}
                                        </div>
                                    </div>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div> 
            </div>
        </myDiv>
    </div>
</div>

<!-- NOTIFICATION'S INBOX - END -->



<!-- ACHIEVEMENT'S INBOX - START -->

<style>

.earned {
    color: green;
}

</style>

<div class="achievement_navbar">
    <div class="achievement_bar_right">
        <acvhieveDiv class="achievement_notification">
            <a class="achieve_icon_wrap" action=""></a>

            <div class="achievement_dd">
                <div class="topbar-dialog achievements-dialog dno" role="menu" style="display: block;">
                    <div class="header fw-wrap">
                        <h3 class="flex--item">
                            achievements
                                <small class="utc-clock sm:d-none">utc time <span class="js-utc-time utc-time">Good Time</span></small>
                        </h3>
                    </div>

                    <div class="modal-content">
                            <div class="js-date-group date-group">
                                {% for privNotification in privNotifications %}
                                <ul class="js-items items">
                                        <li class="">
                                            <a href="

                                                {% if privNotification.type_of_PrivNotify == 'ANSWER_ACCEPT_REP_P' %}
                                                    {{privNotification.url}}#{{privNotification.answer_priv_noti.id}}

                                                {% elif privNotification.type_of_PrivNotify == 'EDIT_GOT_APPROVED' %}
                                                    {{privNotification.url}}

                                                {% elif privNotification.type_of_PrivNotify == 'BOUNTY_AWARDED_REP_P' %}
                                                    {{privNotification.url}}

                                                {% elif privNotification.type_of_PrivNotify == 'MY_ANSWER_UPVOTE_REP_P' %}
                                                    {{privNotification.url}}#{{privNotification.answer_priv_noti.id}}

                                                {% elif privNotification.type_of_PrivNotify == 'MY_QUESTION_UPVOTE_REP_P' %}
                                                    {{privNotification.url}}

                                                {% elif privNotification.type_of_PrivNotify == 'Privilege_Earned' %}
                                                    {{privNotification.url}}

                                                {% elif privNotification.type_of_PrivNotify == 'BADGE_EARNED' %}
                                                    {{privNotification.url}}

                                                {% endif %}

                                                " class="d-flex gs8 gsx" aria-label="2 reputation change: Pop-up-Notification-Panel box is not staying to the right, earned on Stack Overflow, 5 hours ago">
                <div class="favicon favicon-stackoverflow site-icon flex--item" title="Stack Overflow - Clone"></div>



                                                    {% if privNotification.type_of_PrivNotify == "ANSWER_ACCEPT_REP_P" %}
                                                    <span class="js-faux-column rep-up flex--item" title="{{privNotification.date_created_PrivNotify}} hours ago">+{{privNotification.missingReputation}}
                                                    </span>
                                                    {% elif privNotification.type_of_PrivNotify == "MY_QUESTION_UPVOTE_REP_P" %}
                                                    <span class="js-faux-column rep-up flex--item" title="{{privNotification.date_created_PrivNotify}} hours ago">+{{privNotification.missingReputation}}
                                                    </span>
                                                    {% elif privNotification.type_of_PrivNotify == "EDIT_GOT_APPROVED" %}
                                                    <span class="js-faux-column rep-up flex--item" title="{{privNotification.date_created_PrivNotify}} hours ago">+{{privNotification.missingReputation}}
                                                    </span>
                                                    {% elif privNotification.type_of_PrivNotify == "BOUNTY_AWARDED_REP_P" %}
                                                    <span class="js-faux-column rep-up flex--item" title="{{privNotification.date_created_PrivNotify}} hours ago">+{{privNotification.missingReputation}}
                                                    </span>
                                                    {% elif privNotification.type_of_PrivNotify == "MY_ANSWER_UPVOTE_REP_P" %}
                                                    <span class="js-faux-column rep-up flex--item" title="{{privNotification.date_created_PrivNotify}} hours ago">+{{privNotification.missingReputation}}
                                                    </span>
                                                    {% elif privNotification.type_of_PrivNotify == "Privilege_Earned" %}
                                                    <span class="js-faux-column  earned flex--item">
                                                        <i class="fas fa-pencil-alt"></i>
                                                    </span>
                                                    {% elif privNotification.type_of_PrivNotify == "BADGE_EARNED" %}
                                                    <span class="js-faux-column earned flex--item">
                                                        <i class="fas fa-ribbon"></i>
                                                    </span>
                                                    {% endif %}


                                                <div class="message-text flex--item fl1">
                                                    <h4 class="">

                                                    {% if privNotification.type_of_PrivNotify == "ANSWER_ACCEPT_REP_P" %}

                                                    Answer Accepted
                                                    <br>
                                                    {{privNotification.answer_priv_noti.body}}

                                                    {% elif privNotification.type_of_PrivNotify == "EDIT_GOT_APPROVED" %}

                                                    Edit Approved
                                                    <br>
                                                    {{privNotification.question_priv_noti.title}}

                                                    {% elif privNotification.type_of_PrivNotify == "BOUNTY_AWARDED_REP_P" %}

                                                    Bounty Awarded

                                                    {% elif privNotification.type_of_PrivNotify == "MY_ANSWER_UPVOTE_REP_P" %}

                                                    Answer Upvote
                                                    <br>
                                                    <b> • {{privNotification.answer_priv_noti.body}}</b>

                                                    <!-- Done -->
                                                    {% elif privNotification.type_of_PrivNotify == "MY_QUESTION_UPVOTE_REP_P" %}

                                                    Question Upvote
                                                    <br>
                                                    <b> • {{privNotification.question_priv_noti.title}}</b>

                                                    <!-- DONE -->
                                                    {% elif privNotification.type_of_PrivNotify == "Privilege_Earned" %}

                                                    Privilege Earned

                                                    <b> • {{privNotification.for_if}}</b>

                                                    <!-- DONE -->
                                                    {% elif privNotification.type_of_PrivNotify == "BADGE_EARNED" %}

                                                    Badge Earned - {{privNotification.for_if}}
                                                    <br>
                                                    <b> • {{privNotification.description}}</b>


                                                    {% endif %}
                                                    <br>
                                                    {{privNotification.date_created_PrivNotify|naturaltime}}

                                                    </h4>
                                                </div>
                                            </a>
                                        </li>
                                </ul>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </acvhieveDiv>
        </div>
    </div>

<!-- ACHIEVEMENT'S INBOX - END -->



<!-- REVIEW'S INBOX - START -->

<div class="review_navbar">
    <div class="review_bar_right">
        <reviewDiv class="review_notification">
        <a class="review_icon_wrap" action=""></a>

            <div class="review_dd">
                <div class="topbar-dialog inbox-dialog dno" role="menu" style="display: block;">

                    <div class="header fw-wrap">
                        <div class="flex--item fl1">
                            <div class="ai-center d-flex jc-end">
                                <div class="-right">
                                    <a href="{% url 'help:privileges' %}">privileges</a>
                                    {% if request.user.profile.accessTo_moderatorTools %}•
                                    <a href="{% url 'tools:moderator_tools' %}">tools</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="modal-content">
                        <ul>
                            <li class="inbox-item ">
                                {% if can_show == True %}
                                <a href="{% url 'review:review_FirstAns' next_blog.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span">&nbsp;</span>Review First Answers</span>
                                            <span class="item-creation"><span>{% if can_review == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review First Answers
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review First Answers</span>
                                            <span class="item-creation"><span>{% if can_review == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review First Answers
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if can_review == True %}
                                <a href="{% url 'review:review_FirstQns' next_question.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review First Questions</span>
                                            <span class="item-creation"><span>{% if can_review == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review First Questions
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review First Questions</span>
                                            <span class="item-creation"><span>{% if can_review == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review First Questions
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if cal_LateRev == True %}
                                <a href="{% url 'review:review_LateAnswers' questionIDS.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review Late Answers</span>
                                            <span class="item-creation"><span>{% if cal_LateRev == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review Late Answers
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review Late Answers</span>
                                            <span class="item-creation"><span>__None__</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review Late Answers
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if areClosedQuestions_Available == True %}
                                <a href="{% url 'review:reviewClosedQuestions' reviewCloseQuestionID.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type"><span>&nbsp;</span>Review Closed Questions</span>
                                            <span class="item-creation"><span>{% if areClosedQuestions_Available == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location">
                                            Review Closed Questions
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon-stackoverflow flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type"><span>&nbsp;</span>Review Closed Questions</span>
                                            <span class="item-creation"><span>__None__</span></span>
                                        </div>
                                        <div class="item-location">
                                            Review Closed Questions
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if editQuestions_review_Available == True %}
                                <a href="{% url 'review:reviewSuggesstedEdit' reviewEditedPts.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type"><span>&nbsp;</span>Review Suggessted Edits</span>
                                            <span class="item-creation"><span>{% if editQuestions_review_Available == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location">
                                            Review Suggessted Edits
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review Suggessted Edits</span>
                                            <span class="item-creation"><span>__None__</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review Suggessted Edits
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if questionToReOpen_available == True %}
                                <a href="{% url 'review:reOpen_Question_Review' reviewTo_ReOpenQuestionID.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Re-Open Votes Review</span>
                                            <span class="item-creation"><span>{% if questionToReOpen_available == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Re-Open Votes Review
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Re-Open Votes Review</span>
                                            <span class="item-creation"><span>__None__</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Re-Open Votes Review
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if reviewLowPosts == True %}
                                <a href="{% url 'review:reviewLowQualityPosts' reviewLowPts.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Low-Quality Posts Review</span>
                                            <span class="item-creation"><span>{% if reviewLowPosts == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Low-Quality Posts Review
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Low-Quality Posts Review</span>
                                            <span class="item-creation"><span>__None__</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Low-Quality Posts Review
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if is_available_FlagPosts == True %}
                                <a href="{% url 'review:reviewFlagPosts' reviewFlagPts.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review Flag Posts</span>
                                            <span class="item-creation"><span>{% if is_available_FlagPosts == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review Flag Posts
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review Flag Posts</span>
                                            <span class="item-creation"><span>__None__</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review Flag Posts
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                            <li class="inbox-item ">
                                {% if is_available_FlagComments == True %}
                                <a href="{% url 'review:reviewFlagComments' reviewFlagCmnts.id %}" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review Flag Comments</span>
                                            <span class="item-creation"><span>{% if is_available_FlagComments == True %}Available{% else %}__None__{% endif %}</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review Flag Comments
                                        </div>
                                    </div>
                                </a>
                                {% else %}
                                <a href="#" class="d-flex gs8 gsx">
                                        <div class="favicon favicon-stackoverflow site-icon flex--item"></div>
                                    <div class="item-content flex--item fl1">
                                        <div class="item-header">
                                            <span class="item-type "><span>&nbsp;</span>Review Flag Comments</span>
                                            <span class="item-creation"><span>__None__</span></span>
                                        </div>
                                        <div class="item-location ">
                                            Review Flag Comments
                                        </div>
                                    </div>
                                </a>
                                {% endif %}
                            </li>
                        </ul>
                    </div>
                </div> 
            </div>
        </reviewDiv>
    </div>
</div>

<!-- REVIEW'S INBOX - END -->




<style>
.myClass{
    /*flex-shrink: 0;*/
    /*margin-top: -1px;*/
    /*margin-right: 4px;*/
    color: hsl(210,8%,15%);
}

.myNavbar .profile_dd,
.notification_dd{
  right: 40px;
  /*background-color: red;*/
  /*padding: 2em;*/
  width: 350px;
  height: auto;
  display: none;
  position: absolute;
}

/*.myNavbar{
    font-family: 'Trade Winds';
   font-size: 20px;
}
*/
.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 600px;
  width: 50%;
}

/*.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}*/


.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}


.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}






.achievement_navbar .profile_dd,
.achievement_dd {
  right: 25px;
  /*background-color: red;*/
  /*padding: 2em;*/
  width: 350px;
  height: auto;
  display: none;
  position: absolute;
}

/*.achievement-navbar {
    font-size: 20px;
}
*/
.achievement_navbar .achievement_bar_right {
    display: flex;
}

.achievement_navbar .achievement_bar_right img{
    width: 35px;
}

.achievement_navbar .achievement_bar_right .achieve_icon_wrap {
    cursor: pointer;
}

.achievement_navbar .achievement_bar_right .achievement_notification {
  margin-left: 600px;
  width: 50%;
}

/*.achievement-navbar .achievement-bar-right .achievement_notification .achieve-icon-wrap {
    font-size: 28px;
}
*/
.achievement_navbar .achievement_bar_right .achievement_notification {
    position: relative;
}

.achievement_navbar ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.achievement_navbar ul li .btn:hover{
  background: #6593e4;
}

.achievement_navbar .achievement_notification.active .achievement_dd{
  display: block;
}





.review_navbar .profile_dd,
.review_dd {
  right: 45px;
  /*background-color: red;*/
  /*padding: 2em;*/
  width: 350px;
  height: auto;
  display: none;
  position: absolute;
}

.review_navbar .review_bar_right {
    display: flex;
}

.review_navbar .review_bar_right img{
    width: 35px;
}

.review_navbar .review_bar_right .review_icon_wrap {
    cursor: pointer;
}

.review_navbar .review_bar_right .review_notification {
  margin-left: 600px;
  width: 50%;
}

/*.achievement-navbar .achievement-bar-right .achievement_notification .achieve-icon-wrap {
    font-size: 28px;
}
*/
.review_navbar .review_bar_right .review_notification {
    position: relative;
}

.review_navbar ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.review_navbar ul li .btn:hover{
  background: #6593e4;
}

.review_navbar .review_notification.active .review_dd{
  display: block;
}

.fillTheSVG {
    color: hsl(210,8%,15%);
}

.blue {
    color: hsl(210,8%,15%);
}

.forBackgroundClass {
    background-color: hsl(210,8%,85%);;
}

</style>

<style>

.active {
  color: orangered;
  position: relative;
  z-index: 1;
}

.inactive {
  color: grey;
  position: relative;
  z-index: 1;  
}

.voteDownInActive {
  color: grey;
  position: relative;
  z-index: 1;
}

.voteDownActive {
  color: orangered;
  position: relative;
  z-index: 1;
}

button {
    padding: 0;
    border: none;
    background: none;
}

</style>

<script>

function openInbox() {
    // getting = document.getElementsByTagName("myDiv2");
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].classList.toggle("active");

    gettingAchieveOpen = document.getElementsByTagName("acvhieveDiv");
    if (gettingAchieveOpen[0].classList.contains("active")) {
        // alert("Achievements Inbox Panel is Open");
        gettingAchieveOpen[0].classList.toggle("active");
    }


    gettingAchieveOpen = document.getElementsByTagName("reviewDiv");
    if (gettingAchieveOpen[0].classList.contains("active")) {
        // alert("Achievements Inbox Panel is Open");
        gettingAchieveOpen[0].classList.toggle("active");
    }



    var $this = $('.achieveSVG');
    var forBackground = $('.achieveSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    }

    var $this = $('.reviewSVG');
    var forBackground = $('.reviewSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    }

}


function openAchievementInbox() {
    gettingAchieveOpen = document.getElementsByTagName("acvhieveDiv");
    gettingAchieveOpen[0].classList.toggle("active");

    gettingAchieveOpen = document.getElementsByTagName("myDiv");
    if (gettingAchieveOpen[0].classList.contains("active")) {
        // alert("Achievements Inbox Panel is Open");
        gettingAchieveOpen[0].classList.toggle("active");
    }

    gettingAchieveOpen = document.getElementsByTagName("reviewDiv");
    if (gettingAchieveOpen[0].classList.contains("active")) {
        // alert("Achievements Inbox Panel is Open");
        gettingAchieveOpen[0].classList.toggle("active");
    }


    var $this = $('.myInboxSVG');
    var forBackground = $('.myInboxSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    }

    var $this = $('.reviewSVG');
    var forBackground = $('.reviewSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    }


}


function openReviewInbox() {
    gettingReviewOpen = document.getElementsByTagName("reviewDiv");
    gettingReviewOpen[0].classList.toggle("active");


    gettingAchieveOpen = document.getElementsByTagName("acvhieveDiv");
    if (gettingAchieveOpen[0].classList.contains("active")) {
        // alert("Achievements Inbox Panel is Open");
        gettingAchieveOpen[0].classList.toggle("active");
    }

    gettingAchieveOpen = document.getElementsByTagName("myDiv");
    if (gettingAchieveOpen[0].classList.contains("active")) {
        // alert("Achievements Inbox Panel is Open");
        gettingAchieveOpen[0].classList.toggle("active");
    }


    var $this = $('.myInboxSVG');
    var forBackground = $('.myInboxSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    }

    var $this = $('.achieveSVG');
    var forBackground = $('.achieveSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    }



}


    $('._important, .myInboxSVGOuter').click(function() {
    var $this = $('.myInboxSVG');
    var forBackground = $('.myInboxSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    } else {
        $this.addClass('fillTheSVG');
        // alert("Third ")
        forBackground.addClass('forBackgroundClass');
    }
});


    $('._positive, .achieveSVGOuter').click(function() {
    var $this = $('.achieveSVG');
    var forBackground = $('.achieveSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    } else {
        $this.addClass('fillTheSVG');
        // alert("Third ")
        forBackground.addClass('forBackgroundClass');
    }
});


    $('._review, .reviewSVGOuter').click(function() {
    var $this = $('.reviewSVG');
    var forBackground = $('.reviewSVGOuter');

    if ($this.hasClass('fillTheSVG')) {
        $this.removeClass('fillTheSVG');
        forBackground.removeClass('forBackgroundClass');
    } else {
        $this.addClass('fillTheSVG');
        // alert("Third ")
        forBackground.addClass('forBackgroundClass');
    }
});


</script>







    <div class="container">
        
<div data-is-here-when="" class="left-sidebar js-pinned-left-sidebar ps-relative" data-can-be="left-sidebar"></div>

        <div id="content" class="snippet-hidden">



<div class="mainbar-full">
            <div class="s-page-title">
        <div class="s-page-title--text">
            <h1 class="s-page-title--header">
                Suggested First Questions
            </h1>
            <p class="s-page-title--description wmx6">Approve, reject, or improve edits suggested by users.</p>
                    <p class="s-page-title--description wmx4">
                        <button class="js-show-modal-from-nav s-link" role="link">Learn more</button> about the Suggested edits queue.
                    </p>
        </div>
        <div class="s-page-title--actions">
            <div class="s-navigation">
                <a href="/review/suggested-edits" class="s-navigation--item is-selected">Review tasks</a>
                <a href="/review/suggested-edits/stats" class="s-navigation--item">Stats</a>
                    <a href="/review/suggested-edits/history" class="s-navigation--item">History</a>
            </div>
        </div>
    </div>



    <div class="js-review-post-author-guidance-container"></div>
    <div class="js-review-task d-flex">
        <div class="js-review-content flex--item fl1 wmn0" style="opacity: 1;">


{% if is_reviewed %}
<div class="js-review-post-author-guidance-container">
<div class="s-notice s-notice__info mb12">
        <p class="mb0">You have already voted to this Post and no further action is required.</p>
</div></div>
{% endif %}
















{% if actionWas %}
<aside class="js-review-instructions mb12" role="status">
<div class="s-notice s-notice__info">
            <strong><span class="fc-green-600">{% if actionWas == "Approved" %}Approve{% elif actionWas == "Edit_and_Approve" %}Edited and Approve{% else %}Skipped{% endif %}</span> <span title="2021-11-07 09:46:25Z" class="relativetime">{{getThisItemFromReview.date|date:"D, d M, Y"}}</span>:</strong>
        <ul class="mt8 list-reset">
                <li>
                    <div>
                        <a href="{% url 'profile:activityPageTabProfile' getThisItemFromReview.QuestionReviewBy.id getThisItemFromReview.QuestionReviewBy.username %}">{{getThisItemFromReview.QuestionReviewBy}}</a> reviewed this <span title="2021-11-07 09:46:25Z" class="relativetime fw-normal">{{getThisItemFromReview.date|date:"D, d M, Y"}}</span>: <b>{% if actionWas == "Approved" %}Approve{% elif actionWas == "Edit_and_Approve" %}Edited and Approve{% else %}Skipped{% endif %}</b>
                    </div>
                </li>
        </ul>
        <div class="d-flex gs8 pt16">
            {% if can_review == True %}
            <a href="{% url 'review:review_FirstQns' next_question.id %}" class="js-action-button s-btn s-btn__primary flex--item">ReviewQuestions</a>
                    Next task
            {% else %}

            {% endif %}

<!--                 <button class="s-btn flex--item" type="button" data-controller="s-expandable-control" data-s-expandable-control-toggle-class="is-selected" aria-expanded="false" aria-controls="review-additional-details">
                    Reviewer stats
                </button> -->
        </div>
</div>


<!--     <div class="s-expandable" id="review-additional-details">
        <div class="s-notice s-notice__info mt16 s-expandable--content">
            <p class="mb8"><strong>Reviewer Stats</strong></p>
            <ul class="mb0">
                        <li><a href="https://stackoverflow.com/users/17131560/van">Van</a> has approved 5 edit suggestions and rejected 0 edit suggestions and improved 0 edit suggestions</li>

                        <li><a href="https://stackoverflow.com/users/7212686/azro">azro</a> has approved 1058 edit suggestions and rejected 108 edit suggestions and improved 106 edit suggestions</li>
            </ul>
        </div>
    </div> -->
</aside>

{% endif %}






















<aside class="js-review-instructions d-none mb12" role="status"></aside>

            <div class="fs-title">Review the following question edit</div>
            <div class="s-post-summary s-post-summary__minimal p0 mb16 bbw0 mt16">
    <div class="s-post-summary--stats">
            <div class="s-post-summary--stats-item has-accepted-answer">
                1 answer
            </div>
        <div class="s-post-summary--stats-item js-metadata-vote-count" data-post-id="69681868">
            1 vote
        </div>
        <div class="s-post-summary--stats-item">
            33 views
        </div>
    </div>
    <div class="s-post-summary--content">
        <div class="s-post-summary--content-title js-question-title-link"><a href="{{data.get_absolute_url}}" class="question-hyperlink" target="_blank">{{data.title}}</a></div>
        <div class="s-post-summary--meta jc-start">
            <div class="s-user-card s-user-card__minimal">
                        <span class="s-avatar s-user-card--avatar">
                            <a href="{% url 'profile:activityPageTabProfile' data.post_owner.id data.post_owner.username %}">
                                <div class="gravatar-wrapper-16">
                                    <img src="{{data.post_owner.profile.profile_photo.url}}" alt="" width="16" height="16" class="bar-sm">
                                </div>
                            </a>
                        </span>
                        <a href="{% url 'profile:activityPageTabProfile' data.post_owner.id data.post_owner.username %}">{{data.post_owner}}</a><div class="s-user-card--awards mbn1 mx4">
                                <span class="reputation-score" title="reputation score " dir="ltr">{{data.post_owner|calculate_reputation}}</span>
                                <span title="{{data.post_owner|calculateGoldBadges}} gold badges" aria-hidden="true">
                                    <span class="badge1"></span>
                                    <span class="badgecount">{{data.post_owner|calculateGoldBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{data.post_owner|calculateGoldBadges}} gold badges</span>

                                <span title="{{data.post_owner|calculatSilvereBadges}} silver badges" aria-hidden="true">
                                    <span class="badge2"></span>
                                    <span class="badgecount">{{data.post_owner|calculatSilvereBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{data.post_owner|calculatSilvereBadges}} silver badges</span>

                                <span title="{{data.post_owner|calculateBronzeBadges}} bronze badges" aria-hidden="true">
                                    <span class="badge3"></span>
                                    <span class="badgecount">{{data.post_owner|calculateBronzeBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{data.post_owner|calculateBronzeBadges}} bronze badges</span>
                        </div>
                <div class="s-user-card--time">Asked
                    <span title="2021-10-22 18:54:54Z" class="ws-nowrap">{{data.date|naturaltime}}</span>
                </div>
            </div>
        </div>
    </div>
</div>



    <div class="bt bc-black-100 pt12 mb16">
        <div class="s-navigation s-navigation__muted js-review-tabs" role="tablist" data-controller="s-navigation-tablist">
            <button type="button" role="tab" class="s-navigation--item is-selected" id="tab-revision" aria-controls="panel-revision" aria-selected="true" data-is-task="true">
                Revision
            </button>
                <button type="button" role="tab" class="s-navigation--item" id="tab-answers" aria-controls="panel-answers" aria-selected="false" tabindex="-1">
Answers ({{data.answer_set.all.count}})                </button>
        </div>
    </div>

<div id="panel-revision" role="tabpanel" aria-labelledby="tab-revision">

    <div class="post-layout">
            <div class="votecell post-layout--left">
                <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="69681868">
<form method="GET" class="likeForm d-inline" action="{% url 'qa:question_upvote_downvote' data.id %}" data-pk="{{ data.id }}">
    <div id="id_likes{{data.id}}">
        {% if request.user == likepost.upvote_by_q %}
        <button name='submit' type='submit' value="like"><i  class="fas active fa-sort-up fa-4x"></i></button>
        {% else %}
        <button name='submit' type='submit' value="like"><i  class="fas inactive fa-sort-up fa-4x"></i></button>
        {% endif %}
        <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value="{{allToShowVotes}}">
            <p>{{allToShowVotes}}</p>
        </div>
    </div>
</form>

<form action="{% url 'qa:question_upvote_downvote' data.id %}" method="GET" class="d-inline dislikeForm" data-pk="{{ data.id }}">
    <div id="id_dislikes{{data.id}}">
        {% if request.user == likeDownpost.downvote_by_q %}
        <button name='submit' type='submit' value="dislike"><i class="fas voteDownActive fa-sort-down fa-4x"></i></button> 
        {% else %}
        <button name='submit' type='submit' value="dislike"><i class="fas voteDownInActive fa-sort-down fa-4x"></i></button> 
        {% endif %}
    </div>
</form>

</div>

            </div>
        <div class="postcell post-layout--right">



<div class="diffs">


        <div id="panel-5290622-SideBySideHtml" role="tabpanel" aria-labelledby="tab-5290622-SideBySideHtml" class="js-diff-panel mb16" data-type="SideBySideHtml" data-url="" data-full-url="">

                <div class="d-flex gs12 flex__allcells6">

                    <div class="flex--item ">
                            <h1 class="fs-title mb16">{{data.title}}</h1>
                        <div class="s-prose js-post-body">
                            {{data.body|truncatechars:3}}
                        </div>
                    </div>
                </div>
        </div>



        <div class="mb16">
            <a href="/questions/tagged/python" class="post-tag" title="show questions tagged 'python'" rel="tag">python</a> <a href="/questions/tagged/django" class="post-tag" title="show questions tagged 'django'" rel="tag">django</a> <a href="/questions/tagged/django-models" class="post-tag" title="show questions tagged 'django-models'" rel="tag">django-models</a> <a href="/questions/tagged/django-views" class="post-tag" title="show questions tagged 'django-views'" rel="tag">django-views</a> <a href="/questions/tagged/django-queryset" class="post-tag" title="show questions tagged 'django-queryset'" rel="tag">django-queryset</a> 
        </div>
</div>


            <div class="d-flex mt16">
                    <span class="fc-black-500 mr8">
                        Asked <span title="2021-11-21 04:22:05Z" class="relativetime">{{data.date|naturaltime}}</span>
                    </span>
                    
<div class="s-user-card s-user-card__minimal">

            <a href="/users/17468512/define" class="s-avatar s-avatar__16 s-user-card--avatar" tabindex="-1" aria-hidden="true">
        <img src="https://www.gravatar.com/avatar/5201325a9f2f08a0da1e9947d9f3edc9?s=32&amp;d=identicon&amp;r=PG" class="s-avatar--image" alt="">
            </a>
        <div class="s-user-card--info">
                <a href="{% url 'profile:activityPageTabProfile' data.post_owner.id data.post_owner.username %}" class="s-user-card--link lh-lg">
                    {{data.post_owner}}
                </a>



        </div>
</div>
            </div>


<div class="mt16 mb4">
<div class="js-post-menu pt2" data-post-id="69681868">
    <div class="d-flex gs8 s-anchors s-anchors__muted fw-wrap">
    </div>
    <div class="js-menu-popup-container"></div>
</div>
</div>
</div>

    <span class="d-none" itemprop="commentCount"></span> 
    <div class="post-layout--right js-post-comments-component">
        <div id="comments-69681868" class="comments js-comments-container bt bc-black-075 mt12  dno" data-post-id="69681868" data-min-length="15">
            <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="false" data-comments-unavailable="true" data-addlink-disabled="true">
            </ul>
        </div>

        <div id="comments-link-69681868">
            <a class="js-show-link comments-link dno" title="Expand to show all comments on this post" href="#" onclick="" role="button"></a>
        </div>         
    </div>
    </div>

</div>



    <div id="panel-answers" role="tabpanel" aria-labelledby="tab-answers" class="d-none">


{% for ans in data.answer_set.all %}


<a name="69682212"></a>
    <div id="answer-69682212" class="answer js-answer accepted-answer" data-answerid="69682212" data-score="1" data-position-on-page="0" data-highest-scored="0" data-question-has-accepted-highest-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer">
    <div class="post-layout">
        <div class="votecell post-layout--left">
            <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="69682212">
<form method="GET" class="ansLikeForm" action="{% url 'qa:answer_upvote_downvote' ans.id  %}" data-pk="{{ ans.id }}">
    <div id="id_Ans_UpVote{{ans.id}}">
        {% if user in ans.a_vote_ups.all %}
        <button name='submit' type='submit' value="voteAns"><i  class="fas active fa-sort-up fa-4x" ></i></button> 
        {% else %}
        <button name='submit' type='submit' value="voteAns"><i  class="fas inactive fa-sort-up fa-4x"></i></button> 
        {% endif %}
        <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value="">
            <p>{{ans.countAllTheVotes}}</p>
        </div>
    </div>
</form>



<form action="{% url 'qa:answer_upvote_downvote' ans.id  %}" method="GET" class="ansDislikeForm" data-pk="{{ ans.id }}">
    <div id="id_Ans_DownVote{{ans.id}}">
        {% if user in ans.a_vote_downs.all %}
        <button name='submit' type='submit' value="downVoteAns"><i class="fas voteDownActive fa-sort-down fa-4x"></i></button> 
        {% else %}
        <button name='submit' type='submit' value="downVoteAns"><i class="fas voteDownInActive fa-sort-down fa-4x"></i></button> 
        {% endif %}
    </div>
</form>

        {% if ans.accepted %}
        <i  class="correct far fa-check fa-3x" ></i>
        {% else %}
        <i  class="wrong far fa-check fa-3x"></i>
        {% endif %}

        <a class="js-post-issue flex--item s-btn s-btn__unset c-pointer py6 mx-auto" href="/posts/69682212/timeline" data-shortcut="T" data-ks-title="timeline" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-d3nn9264"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 113.73 6.77L8.2 14.3A6 6 0 105 9l3.01-.01-4 4-4-4h3L3 9Zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10V5Z"></path></svg></a><div id="--stacks-s-tooltip-d3nn9264" class="s-popover s-popover__tooltip pe-none" aria-hidden="true" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div>

</div>

        </div>



<div class="answercell post-layout--right">
    <div class="s-prose js-post-body" itemprop="text">
        {{ans.body|truncatechars:30}}
    </div>
    <div class="mt24">
        <div class="d-flex fw-wrap ai-start jc-end gs8 gsy">
            <time itemprop="dateCreated" datetime="2021-10-22T19:29:26"></time>
            <div class="flex--item mr16" style="flex: 1 1 100px;">
                <div class="js-post-menu" data-post-id="69682212">
                <div class="js-menu-popup-container"></div>
            </div></div>

            <div class="post-signature flex--item fl0">
                <div class="user-info user-hover">
                    <div class="user-action-time">
                        answered <span title="2021-10-22 19:29:26Z" class="relativetime">{{ans.date|naturaltime}}</span>
                    </div>
                    <div class="user-gravatar32">
                        <a href="{% url 'profile:activityPageTabProfile' ans.answer_owner.id ans.answer_owner.username %}"><div class="gravatar-wrapper-32"><img src="{% if ans.answer_owner.profile.profile_photo %}{{ans.answer_owner.profile.profile_photo.url}}{% endif %}" alt="" width="32" height="32" class="bar-sm"></div></a>
                    </div>
                    <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                        <a href="{% url 'profile:activityPageTabProfile' ans.answer_owner.id ans.answer_owner.username %}">{{ans.answer_owner}}</a><span class="d-none" itemprop="name">{{ans.answer_owner}}</span>
                        <div class="-flair">
                            <!-- "calculate_reputation" is template tag in file qa_tags.py -->
                            <span class="reputation-score" title="reputation score 359,658" dir="ltr">{{ans.answer_owner|calculate_reputation}}</span><span title="28 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">28</span></span><span class="v-visible-sr">28 gold badges</span><span title="324 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">324</span></span><span class="v-visible-sr">324 silver badges</span><span title="439 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">439</span></span><span class="v-visible-sr">439 bronze badges</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<br><br>
{% endfor %}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.addEventListener('load', function() {
            // Like
            $('.ansLikeForm').submit(function(e) {
                    e.preventDefault();
                    let thatElement = $(this)
                    $.ajax({
                        url: thatElement.attr('action'),
                        data: {
                            'submit': 'like',
                        },
                        dataType: 'json',
                        method: 'get',
                        async: false,
                        success: function(response) {
                            // let a_vote_ups = $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).find('p').html()
                            // let a_vote_downs = $(`#id_Ans_DownVote${thatElement.attr('data-pk')}`).find('p').html()
                            let ansLikes = $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).find('p').html()
                            // alert(ansLikes)
                            if (response.action == 'unDownVoteAndLike') {
                                ansLikes ++
                                ansLikes ++
                                $(`#id_Ans_DownVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i class="fas voteDownInActive fa-sort-down fa-4x"></i><button>`)
                                $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i  class="fas active fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""><p>${ansLikes}</p></div>`)

                            } else if (response.action == 'unlikeAnswer') {
                                ansLikes -= 1
                                $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="voteAns"><i class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""><p>${ansLikes}</p></div>`)

                            } else if (response.action == 'lackOfPrivelege') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You need alteast 15 Reputation to Vote Up<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                            } else if (response.action == 'lackOfPrivelege') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You need alteast 125 Reputation to Down Vote<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                            } else if (response.action == 'cannotLikeOwnPost') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You cannot vote for your Own Post<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                            } else {
                                ansLikes ++
                                $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="voteAns"><i  class="fas active fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""><p>${ansLikes}</p></div>`)
                            }
                        }
                    })
                })
                // Dislike
            $('.ansDislikeForm').submit(function(e) {
                e.preventDefault();
                let thatElement = $(this)
                $.ajax({
                    url: thatElement.attr('action'),
                    data: {
                        'submit': 'ansDownVote',
                    },
                    dataType: 'json',
                    method: 'get',
                    async: false,
                    success: function(response) {
                        let ansLikes = $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).find('p').html()
                        // alert(ansLikes)
                        if (response.action == 'unUpvoteAndDownVote') {
                            ansLikes -= 2
                            $(`#id_Ans_DownVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="downVoteAns"><i class="fas voteDownActive fa-sort-down fa-4x"></i></button>`)
                            $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="downVoteAns"><i  class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""><p>${ansLikes}</p></div>`)

                        } else if (response.action === 'undislike') {
                            ansLikes ++
                            $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="voteAns"><i class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""><p>${ansLikes}</p></div>`)
                            $(`#id_Ans_DownVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="downVoteAns"><i class="fas voteDownInActive fa-sort-down fa-4x"></i></button>`)

                        } else if (response.action == 'lackOfPrivelege') {
                            $('.toast-container').html(
                                `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You need alteast 125 Reputation to Down Vote<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                            );
                            $(".toast").toast('show', {
                                autohide: true,
                            });
                        } else if (response.action == 'cannotLikeOwnPost') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You cannot vote for your Own Post<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                        } else {
                            ansLikes -= 1
                            $(`#id_Ans_UpVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="voteAns"><i class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""><p>${ansLikes}</p></div>`)
                            $(`#id_Ans_DownVote${thatElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="downVoteAns"><i class="fas voteDownActive fa-sort-down fa-4x"></i></button>`)
                        }
                    }
                })
            })
        })
    })
</script>


</div>
</div>
        <div class="js-actions-sidebar flex--item">


{% if is_reviewed == False %}
<div class="fl-shrink0 md:d-none ml24 ws3 ps-sticky t64">
    <div class="s-sidebarwidget s-anchors js-review-actions">
        <div class="s-sidebarwidget--header bb bc-black-3">
            Actions
        </div>
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
        <fieldset class="d-flex gs8 gsy fd-column p12" form="">
                <div class="flex--item">
                    <div class="d-flex gs8 gsx js-action-radio-parent">
                        <div class="flex--item">
                                <input type="radio" name="questionActions" value="LOOKS_OK" class="s-radio js-action-radio" required id="id_questionActions_1">
                        </div>
                        <div class="flex--item">
                                <label class="d-block s-label fw-bold" for="id_questionActions_1">
                                    Looks oK
                                    <p class="s-description o100">This edit clearly improves the post.</p>
                                </label>
                        </div>
                    </div>
                </div>
                <div class="flex--item">
                    <div class="d-flex gs8 gsx js-action-radio-parent">
                        <div class="flex--item">
                            <input type="radio" name="questionActions" value="EDIT" class="s-radio js-action-radio" required id="id_questionActions_2">
                        </div>
                        <div class="flex--item">
                                <label class="d-block s-label fw-bold" for="id_questionActions_2">
                                    Edit
                                    <p class="s-description o100">Make additional improvements to the post yourself.</p>
                                </label>
                        </div>
                    </div>
                </div>
                <div class="flex--item">
                    <div class="d-flex gs8 gsx js-action-radio-parent">
                        <div class="flex--item">
                            <input class="s-radio js-action-radio" type="radio" name="questionActions" id="id_questionActions_3" value="SHARE_FEEDBACK">
                        </div>
                        <div class="flex--item">
                                <label class="d-block s-label fw-bold" for="id_questionActions_3">
                                    Share Feedback <small>(Not Supported Yet)</small>
                                    <p class="s-description o100">Replace an ineffective edit with your own substantive changes.</p>
                                </label>
                        </div>
                    </div>
                </div>
                <div class="flex--item">
                    <div class="d-flex gs8 gsx js-action-radio-parent">
                        <div class="flex--item">
                            <input class="s-radio js-action-radio" type="radio" name="questionActions" id="id_questionActions_4" value="SKIPPED">
                        </div>
                        <div class="flex--item">
                                <label class="d-block s-label fw-bold" for="id_questionActions_4">
                                    Skip
                                    <p class="s-description o100">Can't decide what to do?</p>
                                </label>
                        </div>
                    </div>
                </div>
            <div class="flex--item mxn12 bt bc-black-3">
                <div class="d-flex gs8 gsx ai-center px12 pt12">
                    <div class="flex--item fl1">
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
    </div>
</div>
{% endif %}
<!--Mobile actions-->
{% if is_reviewed == False %}
<div class="d-none js-review-actions md:d-block bg-black-025 ps-fixed b0 l0 r0 pt12 px16 ba bc-black-3 z-nav-fixed">
    <form method="post" enctype="multipart/form-data" action="{% url 'review:review_FirstQns' data.id %}">
                {% csrf_token %}
    <div class="d-flex ai-center pb12">
        <div class="flex--item mr16 fs-body2 fc-black-600">
            Actions
        </div>
        <div class="flex--item fl1 s-select">
                <select class="js-action-dropdown" name="questionActions">
                    <option value="" selected="">Please select one...</option>
                        <option value="LOOKS_OK">Looks oK</option>
                        <option value="EDIT">Edit</option>
                        <option value="SHARE_FEEDBACK">Share Feedback</option>
                        <option value="SKIPPED">Skip</option>
                </select>
        </div>
    </div>

    <div class="d-flex mxn16 bt bc-black-3 bg-white py12 ai-center">
        <div class="flex--item fl1 ml16">
            <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
    </div>
</form>
</div>
{% endif %}
</div>
    </div>
    <div class="js-review-editor d-none"></div>
</div>

        </div>
    </div>


            <footer id="footer" class="site-footer js-footer" role="contentinfo">
        <div class="site-footer--container">
                <div class="site-footer--logo">
                    <i class="fab fa-stack-overflow fa-3x"></i>
                </div>
            <nav class="site-footer--nav">
                    <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                        <h5 class="-title"><a href="" class="" >Stack Overflow - Clone</a></h5>
                        <ul class="-list js-primary-footer-links">
                            <li class="-item"><a href="/questions" class=" -link" data-gps-track="footer.click({ location: 4, link: 16})">Questions</a></li>
                                <li class="-item"><a href="" class=" -link" >Jobs</a></li>
                                <li class="-item"><a href="" class=" -link" >Developer Jobs Directory</a></li>
                                     <li class="-item"><a href="" class=" -link" >Salary Calculator</a></li>
                                <li class="-item"><a href="" class=" -link" >Help</a></li>
                                <li class="-item"><a onclick='StackExchange.switchMobile("on")' class=" -link" >Mobile</a></li>
                        </ul>
                    </div>
                    <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                        <h5 class="-title"><a href="">Products</a></h5>
                        <ul class="-list">
                            <li class="-item"><a href="" class=" -link" 
                                                 
                                                >Teams</a></li>
                            <li class="-item"><a href="" class=" -link" >Talent</a></li>
                            <li class="-item"><a href="" class=" -link" >Advertising</a></li>
                            <li class="-item"><a href="" class=" -link">Enterprise</a></li>
                        </ul>
                    </div>
                <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                    <h5 class="-title"><a href="">Company</a></h5>
                    <ul class="-list">
                            <li class="-item"><a class=" -link" href="">About</a></li>
                        <li class="-item"><a class=" -link" href="">Press</a></li>
                            <li class="-item"><a class=" -link" href="">Work Here</a></li>
                        <li class="-item"><a class=" -link" href="">Legal</a></li>
                        <li class="-item"><a class=" -link" href="">Privacy Policy</a></li>
                        <li class="-item"><a class="-link" href="">Terms of Service</a></li>
                            <li class="-item"><a class=" -link"  href="">Contact Us</a></li>
                            <li class="-item" id="consent-footer-link"><a class="-link js-cookie-settings" href="#" data-consent-popup-loader="footer">Cookie Settings</a></li>
                        <li class="-item"><a class=" -link"  href="">Cookie Policy</a></li>
                    </ul>
                </div>
            </nav>
            <div class="site-footer--copyright fs-fine">
                <ul class="-list">
                    <li class="-item"><a class="-link" href="">Blog</a></li>
                    <li class="-item"><a href="" class="-link" >Facebook</a></li>
                    <li class="-item"><a href="" class="-link" >Twitter</a></li>
                    <li class="-item"><a href="" class="-link" >LinkedIn</a></li>
                    <li class="-item"><a href="" class="-link">Instagram</a></li>
                </ul>

                <p class="mt-auto mb24">
site design / logo &#169; 2021 Stack Exchange Inc; user contributions licensed under <a href="https://stackoverflow.com/help/licensing">cc by-sa</a>.                    <span id="svnrev">rev&nbsp;2021.11.12.40742</span>
                </p>
            </div>
        </div>

    </footer>



        
    <div id="onetrust-consent-sdk" class="d-none"></div>
    <div id="onetrust-banner-sdk" data-controller="s-modal"></div>
    <div id="ot-pc-content" class="d-none"></div>
    <div id="onetrust-style" class="d-none">&nbsp;</div>
    <div class="d-none js-consent-banner-version" data-consent-banner-version="baseline"></div>



</body></html>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="{% static 'plugins/css/bootstrap.min.css' %}" type="text/css" media="all" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>



















<style>
/*body {font-family: Arial, Helvetica, sans-serif;}*/

/* The Modal (background) */
.first-Q-Review {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-firstReview-Q-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>



<!-- The Modal -->
<div id="myModal" class="first-Q-Review">



  <!-- Modal content -->
  <div class="modal-firstReview-Q-content">
    <span class="close">&times;</span>
<link href="{% static 'MarkDown-Editor/plugins/css/ace.min.css' %}" type="text/css" media="all" rel="stylesheet" />
<link href="{% static 'MarkDown-Editor/plugins/css/resizable.min.css' %}" type="text/css" media="all" rel="stylesheet" />
<link href="{% static 'MarkDown-Editor/martor/css/martor.bootstrap.min.css' %}" type="text/css" media="all" rel="stylesheet" />

<div class="container">
<h4>{{data.title|truncatechars:3}}</h4>
</div>


            <form id="friend-form">
                    {% csrf_token %}
                    {{ edit_Q_Form|crispy }}
                    <div class = "col text-center">
                        <input type="submit" class="btn btn-primary" value="Save" />
                    </div>
            </form>

    <br><br>
<button id='showDone' class="btn btn-primary" onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>I am Done</button>
<hr/>


<div class="container-fluid">
    <table class="table table-striped table-sm" id="my_friends">
        <tbody>
        </tbody>
    </table>
</div>



<script>
    $(document).ready(function () {
        /*
            On submiting the form, send the POST ajax
            request to server and after successfull submission
            display the object.
        */
        $("#friend-form").submit(function (e) {
            // preventing from page reload and default actions
            e.preventDefault();
            // serialize the data for sending the form data.
            var serializedData = $(this).serialize();
            // make POST ajax call
            $.ajax({
                type: 'POST',
                url: "{% url 'review:EditQuestionAjax' data.id %}",
                data: serializedData,
                success: function (response) {
                    // display the newly friend to table.
                    var instance = JSON.parse(response["instance"]);
                    var fields = instance[0]["fields"];
                    $("#my_friends tbody").html(
                        `<h2>SuccessFully Saved</h2>
                        `
                    )
                },
                error: function (response) {
                    // alert the error if any error occured
                    alert(response["responseJSON"]["error"]);
                }
            })
        })

    })
</script>



<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/ace.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/mode-markdown.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/ext-language_tools.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/theme-github.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/typo.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/spellcheck.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/highlight.min.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/resizable.min.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/plugins/js/emojis.min.js' %}"></script>
<script type="text/javascript" src="{% static 'MarkDown-Editor/martor/js/martor.bootstrap.min.js' %}"></script>



  </div>

</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.addEventListener('load', function() {
            // Like
            $('.likeForm').submit(function(e) {
                    e.preventDefault();
                    let thisElement = $(this)
                    $.ajax({
                        url: thisElement.attr('action'),
                        data: {
                            'submit': 'like',
                        },
                        dataType: 'json',
                        method: 'get',
                        async: false,
                        success: function(response) {
                            let likes = $(`#id_likes${thisElement.attr('data-pk')}`).find('p').html()
                            if (response.action == 'undislike_and_like') {
                                likes ++
                                likes ++
                                $(`#id_dislikes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i class="fas voteDownInActive fa-sort-down fa-4x"></i><button>`)
                                $(`#id_likes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i  class="fas active fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount"><p>${likes}</p></div>`)

                            } else if (response.action == 'unlike') {
                                likes -= 1
                                $(`#id_likes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i  class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount"><p>${likes}</p></div>`)

                            } else if (response.action == 'voteError') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>Your vote is now locked, and will - unless the Question Edit.<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                            } else if (response.action == 'lackOfPrivelege') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You need alteast 15 Reputation to Vote Up<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                            } else if (response.action == 'cannotLikeOwnPost') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You cannot vote for your Own Post<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                            } else {
                                likes++
                                $(`#id_likes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i  class="fas active fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount"><p>${likes}</p></div>`)
                            }
                        }
                    })
                })
                // Dislike
            $('.dislikeForm').submit(function(e) {
                e.preventDefault();
                let thisElement = $(this)
                $.ajax({
                    url: thisElement.attr('action'),
                    data: {
                        'submit': 'downVote',
                    },
                    dataType: 'json',
                    method: 'get',
                    async: false,
                    success: function(response) {
                        let likes = $(`#id_likes${thisElement.attr('data-pk')}`).find('p').html()
                        if (response.action == 'unlike_and_dislike') {
                            likes -= 2
                            $(`#id_dislikes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="dislike"><i class="fas voteDownActive fa-sort-down fa-4x"></i></button>`)
                            $(`#id_likes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="dislike"><i  class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount"><p>${likes}</p></div>`)

                        } else if (response.action === 'undislike') {
                            likes ++
                            $(`#id_dislikes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="dislike"><i class="fas voteDownInActive fa-sort-down fa-4x"></i></button>`)
                            $(`#id_likes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i  class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount"><p>${likes}</p></div>`)
                        } else if (response.action == 'voteError') {
                            $('.toast-container').html(
                                `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>Your vote is now locked, and will - unless the Question Edit.<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                            );
                            $(".toast").toast('show', {
                                autohide: true,
                            });
                        } else if (response.action == 'lackOfPrivelege') {
                            $('.toast-container').html(
                                `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You need alteast 125 Reputation to Down Vote<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                            );
                            $(".toast").toast('show', {
                                autohide: true,
                            });
                        } else if (response.action == 'cannotLikeOwnPost') {
                                $('.toast-container').html(
                                    `<div data-delay="5000" class="toast fade"><div class="alert alert-danger"><strong>Alert ! </strong>You cannot vote for your Own Post<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button></div></div>`
                                );
                                $(".toast").toast('show', {
                                    autohide: true,
                                });
                        } else {
                            likes -= 1
                            $(`#id_dislikes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="dislike"><i class="fas voteDownActive fa-sort-down fa-4x"></i></button>`)
                            $(`#id_likes${thisElement.attr('data-pk')}`).html(`<button name='submit' type='submit' value="like"><i  class="fas inactive fa-sort-up fa-4x"></i></button><div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount"><p>${likes}</p></div>`)
                        }
                    }
                })
            })
        })
    })
</script>




<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("id_questionActions_2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function sd() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function closeIt() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.addEventListener('load', function() {
            $('.readNotification').on('click',function(e) {
                e.preventDefault();
                let thisElement = $(this)
                $.ajax({
                    url:"{% url 'notification:read_All_Notifications' %}",
                    dataType: 'json',
                    method: 'get',
                    success: function(response) {
                        if (response.action == 'readedAll') {
                            $(`.button__badge`).text(``)
                            $(`.button__badge`).removeClass("button__badge");
                        }
                    }
                })
            })
        })
    })
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.addEventListener('load', function() {
            $('.readPrivNotification').on('click',function(e) {
                e.preventDefault();
                let thisElement = $(this)
                $.ajax({
                    url:"{% url 'notification:read_All_Priv_Notifications' %}",
                    dataType: 'json',
                    method: 'get',
                    success: function(response) {
                        if (response.action == 'readedAllPrivNotifications') {
                            $(`.unseen-reputation`).text(``)
                            $(`.unseen-reputation`).removeClass("unseen-reputation");
                        }
                    }
                })
            })
        })
    })
</script>


</body>
</html>


