{% extends 'profile/base.html' %}
{% load humanize %}
{% load qa_tags %}
{% load static %}

{% block content %}

<link href="{% static 'css/tools.css' %}" type="text/css" media="all" rel="stylesheet" />


<div class="heading"><h2>Questions with Most Comments/Views/Edits</h2></div>

<style>

.warpper-Q{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.panels-Q{
  background:#fffffff6;
  /*width:100%;*/
  /*max-width:500px;*/
  /*border-radius:3px;*/
  /*overflow:hidden;*/
}
.panel-Q{
  display:none;
  animation: fadein .5s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.panel-title-Q{
  font-size:1.5em;
  font-weight:bold
}
.radio-Q{
  display:none;
}
#one-Q:checked ~ .panels-Q #one-panel-Q,
#two-Q:checked ~ .panels-Q #two-panel-Q,
#three-Q:checked ~ .panels-Q #three-panel-Q,
#four-Q:checked ~ .panels-Q #four-panel-Q{
  display:block
}
.tab-selected {
    background-color: white;
    /*color: white;*/
}
.tab-selected.active {
    background-color: grey;
    color: white;
}
</style>

<script>



function FirstTab_Q() {
    gettingOpen = document.getElementsByClassName("First-Q")
    gettingOpen[0].classList.add("active");

    gettingOpen = document.getElementsByClassName("Second-Q");
    gettingOpen[0].classList.remove("active");


    gettingOpen = document.getElementsByClassName("Third-Q");
    gettingOpen[0].classList.remove("active");

    gettingOpen = document.getElementsByClassName("Fourth-Q");
    gettingOpen[0].classList.remove("active");


}

function SecondTab_Q() {

    gettingOpen = document.getElementsByClassName("Second-Q");
    gettingOpen[0].classList.add("active");

    gettingOpen = document.getElementsByClassName("First-Q");
    gettingOpen[0].classList.remove("active");

    gettingOpen = document.getElementsByClassName("Third-Q");
    gettingOpen[0].classList.remove("active");

    gettingOpen = document.getElementsByClassName("Fourth-Q");
    gettingOpen[0].classList.remove("active");

}

function ThirdTab_Q() {

    gettingOpen = document.getElementsByClassName("Third-Q");
    gettingOpen[0].classList.add("active");

    gettingOpen = document.getElementsByClassName("First-Q");
    gettingOpen[0].classList.remove("active");

    gettingOpen = document.getElementsByClassName("Second-Q");
    gettingOpen[0].classList.remove("active");

    gettingOpen = document.getElementsByClassName("Fourth-Q");
    gettingOpen[0].classList.remove("active");


}



</script>


<br>
<div id="user-panel-questions" class="user-panel js-user-panel">
    <div class="d-flex ai-center jc-space-between bb bc-black-100 pb4 h32 mb8 js-user-subtabs">
            <h3 class="flex--item mb0 mr-auto px2 profile-section-title"><a href="/users/17131560/van?tab=questions"></a></h3>
<div class="warpper-Q">

  <div class="tabs-Q">
      <label class="s-btn s-btn__muted s-btn__outlined s-btn__xs First-Q tab-selected active" id="one-tab-Q" onclick="FirstTab_Q();" for="one-Q">Votes</label>
      <label class="s-btn s-btn__muted s-btn__outlined s-btn__xs Second-Q tab-selected" id="two-tab-Q" onclick="SecondTab_Q();" for="two-Q">Comments</label>
      <label class="s-btn s-btn__muted s-btn__outlined s-btn__xs Third-Q tab-selected" id="three-tab-Q" onclick="ThirdTab_Q();" for="three-Q">Edits</label>
  </div>
</div>
</div>

  <input class="radio-Q" id="one-Q" name="group-Q" type="radio" checked>
  <input class="radio-Q" id="two-Q" name="group-Q" type="radio">
  <input class="radio-Q" id="three-Q" name="group-Q" type="radio">
  <input class="radio-Q" id="four-Q" name="group-Q" type="radio">
  <div class="panels-Q">


  <div class="panel-Q" id="one-panel-Q">

{% if questions_comnts %}

                {% for question in questions_comnts %}

    <div class="question-summary narrow" id="question-summary-{{question.id}}">
        <div class="w48">&nbsp;</div>
        <div class="question-counts cp">
            <div class="votes">
                <div class="mini-counts">{{question.calculate_UpVote_DownVote}}</div>
            </div>
        <div class="status {% if question.is_answer_accepted %}is_answer_accepted{% endif %}" title="one of the answers was accepted as the correct answer">
            <div class="mini-counts">{{question.count_answers}}</div>
        </div>
        <div class="views">
            <div class="mini-counts">{{question.calculate_viewers}}</div>
        </div>
    </div>
    <div class="summary">
        <h3><a href="{{question.get_absolute_url}}" target="_blank" class="question-hyperlink">{{question.title|truncatechars:20}}</a></h3>
        {% for tag in question.tags.all %}
        <div class="tags t-python t-django t-django-models t-django-views t-django-queryset">
            <a href="{% url 'tagbadge:taggedItemsFrom_All' tag.id %}" class="post-tag" title="show questions tagged &#39;{{tag}}&#39;" rel="tag">{{tag}}</a> 
            {% endfor %}
        </div>
        <div class="started">
                <span class="answered">
                    <b>Asked by</b> - <a href="{{question.post_owner.profile.get_absolute_url}}">{{question.post_owner}}</a>
                </span>
                    <div title="{{question.answer_owner}}">
                        <img src="{% if question.post_owner.profile.profile_photo %} {{question.post_owner.profile.profile_photo.url}}{% endif %}" alt="" width="24" height="24" class="bar-sm">
                    </div>
                           <div class="-flair">
                                <span class="reputation-score" title="reputation score " dir="ltr">{{question.post_owner|calculate_reputation}}</span>
                                {% if question.post_owner|calculateGoldBadges %}
                                <span title="{{question.post_owner|calculateGoldBadges}} gold badges" aria-hidden="true">
                                    <span class="badge1"></span>
                                    <span class="badgecount">{{question.post_owner|calculateGoldBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculateGoldBadges}} gold badges</span>
                                {% endif %}
                                {% if question.post_owner|calculatSilvereBadges %}

                                <span title="{{question.post_owner|calculatSilvereBadges}} silver badges" aria-hidden="true">
                                    <span class="badge2"></span>
                                    <span class="badgecount">{{question.post_owner|calculatSilvereBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculatSilvereBadges}} silver badges</span>
                                {% endif %}
                                {% if question.post_owner|calculateBronzeBadges %}
                                <span title="{{question.post_owner|calculateBronzeBadges}} bronze badges" aria-hidden="true">
                                    <span class="badge3"></span>
                                    <span class="badgecount">{{question.post_owner|calculateBronzeBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculateBronzeBadges}} bronze badges</span>
                                {% endif %}
                            </div>
            <span class="reputation-score">
                Asked {{question.date}}
            </span>
        </div>
    </div>
</div>

                {% endfor %}

{% else %}

<b class="no-post">No Posts</b>


{% endif %}
  </div>

  <div class="panel-Q" id="two-panel-Q">
    <div class="user-panel-content">

    {% if question_vws %}
                {% for question in question_vws %}

    <div class="question-summary narrow" id="question-summary-{{question.id}}">
        <div class="w48">&nbsp;</div>
        <div class="question-counts cp">
            <div class="votes">
                <div class="mini-counts">{{question.calculate_UpVote_DownVote}}</div>
            </div>
        <div class="status {% if question.is_answer_accepted %}is_answer_accepted{% endif %}" title="one of the answers was accepted as the correct answer">
            <div class="mini-counts">{{question.count_answers}}</div>
        </div>
        <div class="views">
            <div class="mini-counts">{{question.calculate_viewers}}</div>
        </div>
    </div>
    <div class="summary">
        <h3><a href="{{question.get_absolute_url}}" target="_blank" class="question-hyperlink">{{question.title|truncatechars:20}}</a></h3>
        {% for tag in question.tags.all %}
        <div class="tags t-python t-django t-django-models t-django-views t-django-queryset">
            <a href="{% url 'tagbadge:taggedItemsFrom_All' tag.id %}" class="post-tag" title="show questions tagged &#39;{{tag}}&#39;" rel="tag">{{tag}}</a> 
            {% endfor %}
        </div>
        <div class="started">
                <span class="answered">
                    <b>Asked by</b> - <a href="{{question.post_owner.profile.get_absolute_url}}">{{question.post_owner}}</a>
                </span>
                    <div title="{{question.answer_owner}}">
                        <img src="{% if question.post_owner.profile.profile_photo %} {{question.post_owner.profile.profile_photo.url}}{% endif %}" alt="" width="24" height="24" class="bar-sm">
                    </div>
                           <div class="-flair">
                                <span class="reputation-score" title="reputation score " dir="ltr">{{question.post_owner|calculate_reputation}}</span>
                                {% if question.post_owner|calculateGoldBadges %}
                                <span title="{{question.post_owner|calculateGoldBadges}} gold badges" aria-hidden="true">
                                    <span class="badge1"></span>
                                    <span class="badgecount">{{question.post_owner|calculateGoldBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculateGoldBadges}} gold badges</span>
                                {% endif %}
                                {% if question.post_owner|calculatSilvereBadges %}

                                <span title="{{question.post_owner|calculatSilvereBadges}} silver badges" aria-hidden="true">
                                    <span class="badge2"></span>
                                    <span class="badgecount">{{question.post_owner|calculatSilvereBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculatSilvereBadges}} silver badges</span>
                                {% endif %}
                                {% if question.post_owner|calculateBronzeBadges %}
                                <span title="{{question.post_owner|calculateBronzeBadges}} bronze badges" aria-hidden="true">
                                    <span class="badge3"></span>
                                    <span class="badgecount">{{question.post_owner|calculateBronzeBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculateBronzeBadges}} bronze badges</span>
                                {% endif %}
                            </div>
            <span class="reputation-score">
                Asked {{question.date}}
            </span>
        </div>
    </div>
</div>

                {% endfor %}

{% else %}

<b class="no-post">No Posts</b>


{% endif %}
  </div>
</div>

  <div class="panel-Q" id="three-panel-Q">
    <div class="user-panel-content">
        {% if question_edts %}
{% for question in question_edts %}
    <div class="question-summary narrow" id="question-summary-{{question.id}}">
        <div class="w48">&nbsp;</div>
        <div class="question-counts cp">
            <div class="votes">
                <div class="mini-counts">{{question.calculate_UpVote_DownVote}}</div>
            </div>
        <div class="status {% if question.is_answer_accepted %}is_answer_accepted{% endif %}" title="one of the answers was accepted as the correct answer">
            <div class="mini-counts">{{question.count_answers}}</div>
        </div>
        <div class="views">
            <div class="mini-counts">{{question.calculate_viewers}}</div>
        </div>
    </div>
    <div class="summary">
        <h3><a href="{{question.get_absolute_url}}" target="_blank" class="question-hyperlink">{{question.title|truncatechars:20}}</a></h3>
        {% for tag in question.tags.all %}
        <div class="tags t-python t-django t-django-models t-django-views t-django-queryset">
            <a href="{% url 'tagbadge:taggedItemsFrom_All' tag.id %}" class="post-tag" title="show questions tagged &#39;{{tag}}&#39;" rel="tag">{{tag}}</a> 
            {% endfor %}
        </div>
        <div class="started">
                <span class="answered">
                    <b>Asked by</b> - <a href="{{question.post_owner.profile.get_absolute_url}}">{{question.post_owner}}</a>
                </span>
                    <div title="{{question.answer_owner}}">
                        <img src="{% if question.post_owner.profile.profile_photo %} {{question.post_owner.profile.profile_photo.url}}{% endif %}" alt="" width="24" height="24" class="bar-sm">
                    </div>
                           <div class="-flair">
                                <span class="reputation-score" title="reputation score " dir="ltr">{{question.post_owner|calculate_reputation}}</span>
                                {% if question.post_owner|calculateGoldBadges %}
                                <span title="{{question.post_owner|calculateGoldBadges}} gold badges" aria-hidden="true">
                                    <span class="badge1"></span>
                                    <span class="badgecount">{{question.post_owner|calculateGoldBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculateGoldBadges}} gold badges</span>
                                {% endif %}
                                {% if question.post_owner|calculatSilvereBadges %}

                                <span title="{{question.post_owner|calculatSilvereBadges}} silver badges" aria-hidden="true">
                                    <span class="badge2"></span>
                                    <span class="badgecount">{{question.post_owner|calculatSilvereBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculatSilvereBadges}} silver badges</span>
                                {% endif %}
                                {% if question.post_owner|calculateBronzeBadges %}
                                <span title="{{question.post_owner|calculateBronzeBadges}} bronze badges" aria-hidden="true">
                                    <span class="badge3"></span>
                                    <span class="badgecount">{{question.post_owner|calculateBronzeBadges}}</span>
                                </span>
                                <span class="v-visible-sr">{{question.post_owner|calculateBronzeBadges}} bronze badges</span>
                                {% endif %}
                            </div>
            <span class="reputation-score">
                Asked {{question.date}}
            </span>
        </div>
    </div>
</div>
{% endfor %}

{% else %}

<b class="no-post">No Posts</b>


{% endif %}
  </div>
  </div>

</div>
</div>


{% endblock content %}