{% extends "qa/base.html" %}
{% load staticfiles %}

{% block content %}

<div class="col-md-8">

    <ul class="nav nav-tabs nav-justified">
        <li role="presentation" {% if active_tab == 'latest' %}class="active"{% endif %}><a href="#latest" data-toggle="tab"><span class="glyphicon glyphicon-th-list"></span> Latest</a></li>
        <li role="presentation" {% if active_tab == 'unans' %}class="active"{% endif %}><a href="#unans" data-toggle="tab"><span class="glyphicon glyphicon-question-sign"></span> Unanswered <span class="badge">{{ totalnoans }}</span></a></li>
        <li role="presentation" {% if active_tab == 'reward' %}class="active"{% endif %}><a href="#reward" data-toggle="tab"><span class="glyphicon glyphicon-star"></span> Most Rewarding <span class="badge">{{ reward | length }}</span></a></li>
    </ul>
    <br/>
<div class="tab-content">
<div class="tab-pane {% if active_tab == 'latest' %}active{% endif %}" id="latest">
{% if questions %}
  {% for question in questions %}
    <div class="row">
      <div class="col-sm-1 ans"><small><div class="ques">{{ question.num_answers }}</div>Answers</small></div>
      <div class="col-sm-1 ans"><small><div class="ques">{{ question.views }}</div>Views</small></div>
      <p>
        {% if question.reward %}<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>{% endif %}
        <h3><a href="{% url 'qa_detail' question.id %}">{{ question.title }}</a></h3>
        <br/>
        {% for tag in question.tags.all %}
            <a href="{% url 'qa_tag' tag.slug %}"><tag>{{ tag.slug }}</tag></a>
        {% endfor %}
        <small> {{ question.pub_date }}</small>
      </p>
    </div>
    <hr>
  {% endfor %}

<div class="pagination">
  {% if is_paginated %}
      <div class="pagination">
          <span class="page-links">
              {% if page_obj.has_previous %}
                  <a href="{% url 'qa_index' %}?page={{ page_obj.previous_page_number }}">previous</a>
              {% endif %}
              <span class="page-current">
                  Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
              </span>
              {% if page_obj.has_next %}
                  <a href="{% url 'qa_index' %}?page={{ page_obj.next_page_number }}">next</a>
              {% endif %}
          </span>
      </div>
  {% endif %}
</div>

{% else %}
<div class="alert alert-warning" role="alert">No Questions are available!</div>
{% endif %}
</div>

<div class="tab-pane {% if active_tab == 'unans' %}active{% endif %}" id="unans">
{% if noans %}
  {% for question in noans %}
  <div class="row">
  <div class="col-sm-1 ans"><small><div class="ques">{{ question.num_answers }}</div>Answers</small></div>
  <div class="col-sm-1 ans"><small><div class="ques">{{ question.views }}</div>Views</small></div>
  <p>
    {% if question.num_answers %}<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>{% endif %} <a class="ques" href="{% url 'qa_detail' question.id %}">{{ question.title }}</a>
    <br/>
    {% for tag in question.tags.all %}
        <a href="{% url 'qa_tag' tag.slug %}"><tag>{{ tag.slug }}</tag></a>
    {% endfor %}
    <small> {{ question.pub_date }}</small>
  </p>
</div>
<hr>
  {% endfor %}

{% else %}
<div class="alert alert-warning" role="alert">No Questions are available!</div>
{% endif %}
<div class="pagination">
    <span class="step-links">
        {% if noans.has_previous %}
            <a href="?noans_page={{ noans.previous_page_number }}&active_tab=unans">previous</a>
        {% endif %}

        <span class="current">
            Page {{ noans.number }} of {{ noans.paginator.num_pages }}.
        </span>

        {% if noans.has_next %}
            <a href="?noans_page={{ noans.next_page_number }}&active_tab=unans">next</a>
        {% endif %}
    </span>
</div>
</div>

<div class="tab-pane {% if active_tab == 'reward' %}active{% endif %}" id="reward">
{% if reward %}
  {% for question in reward %}
  <div class="row">
  <div class="col-sm-1 ans"><small><div class="ques">{{ question.num_answers }}</div>Answers</small></div>
  <div class="col-sm-1 ans"><small><div class="ques">{{ question.views }}</div>Views</small></div>
  <p>
    {% if question.num_answers %}<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>{% endif %} <a class="ques" href="{% url 'qa_detail' question.id %}">{{ question.title }}</a>
    <br/>
    {% for tag in question.tags.all %}
        <a href="{% url 'qa_tag' tag.slug %}"><tag>{{ tag.slug }}</tag></a>
    {% endfor %}
    <small> {{ question.pub_date}}</small>
  </p>
</div>
<hr>
  {% endfor %}

{% else %}
<div class="alert alert-warning" role="alert">No Questions are available!</div>
{% endif %}
</div>

  </div>
</div>

<div class="col-md-4">

  <div class="panel panel-default">
    <div class="panel-body">
      <h4>Total Questions: {{ totalcount }}</h4>
      <h4>Total Answers: {{ anscount }}</h4>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Recent Tags</h3>
    </div>
    <div class="panel-body">
      {% for question in questions %}
      {% for tag in question.tags.all %}
          <a href="{% url 'qa_tag' tag.slug %}"><tag>{{ tag.slug }}</tag></a>
      {% endfor %}
      {% endfor %}
    </div>
  </div>

  {% if noans.count %}
  <div class="panel panel-warning">
    <div class="panel-heading">
      <h3 class="panel-title">Unanswered Questions</h3>
    </div>
    <div class="panel-body">
    <ul>
      {% for question in noans %}
      <li><a href="{% url 'qa_detail' question.id %}">{{ question.title }}</a></li>
      {% endfor %}
    </ul>
    </div>
  </div>
  {% endif %}
  {% comment %}
  {% if user.is_authenticated %}

  <div class="span3 well">
    <center>
      <a href="{% url 'qa_profile' user.id %}" data-toggle="modal">
        {% if user.userqaprofile.picture %}
          <img src="{{ user.userqaprofile.picture }}" name="aboutme" width="100" height="100" class="img-circle">
        {% else %}
          <img src="{% static 'qa/user.png' %}" name="aboutme" width="100" height="100" class="img-circle">
        {% endif %}
      </a>
      <h3>{{ user.first_name }} {{ user.last_name }}</h3>
      <a href="/profile/{{ user.id }}">My Profile</a> | <!--to consider-->
      <a href="/logout/">Logout</a>
    </center>
  </div>
  {% else %}
  <a class="btn btn-block btn-success" href="/login"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Login | Sign Up</a><br/>
  {% endif %}{% endcomment %}

</div>

{% endblock content %}
