<style>
.closed {
  width:100%;
  height:7px;
  position: absolute;

  background: #FF4444;
}

.open {
  width:100%;
  height:7px;
  position: absolute;

  background: #99CC00;
}

.rewarding {
  width:100%;
  height:7px;
  position: absolute;

  background: #AA66CC;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
<style>
big {
  font-size:20px;
  padding : 2px 0px 2px 0px;
}
</style>
{% load staticfiles %}
{% load django_markdown %}

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<style>
cool {
  font-family: 'Lobster', cursive;
}
</style>

{% if question.closed %}
  <div class="closed"></div>
{% else %}
    {% if question.reward %}
    <div class="rewarding"></div>
    {% else %}
    <div class="open"></div>
    {% endif %}
{% endif %}

<div class="container">

  {% include "qa/header.html" %}

{% if message %}
<div class="alert alert-danger" role="alert">{{ message }}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
</div>
{% endif %}

{% if question.reward %}
<div class="alert alert-info" role="alert">This question has been marked to be worth a reward of <b>{{ question.reward }}<b> points!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
</div>
{% endif %}

<div class="jumbotron">
  <small class="pull-right">Posted by {{ question.user_data.user.username }}, {{ question.pub_date }}</small>
  <h3><cool>Q: </cool>{{ question.title }}</h3>
  <h4>{{ question.description }}</h4>
  <p>
    {% if user.is_authenticated %}
  <a href="/thumb/{{ user.id }}/{{ question.id }}/0/" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
  <a href="/thumb/{{ user.id }}/{{ question.id }}/1/" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a>
    {% endif %}
    {% if question.closed %}
    <p class="pull-right">This Question has been closed.</p>
    {% else %}
    <a class="btn btn-primary btn-sm pull-right" href="/answer/{{ question.id }}" role="button">Answer this Question!</a>
    {% endif %}
  </p>
</div>

{% if answers %}
  <h3>Answers</h3>
  <hr/>

    {% for answer in answers %}
    <div class="row">
      {% if user.is_authenticated %}
      <div class ="col-md-1">
        <div class="row">
          <div class ="col-sm-1"><big class="pull-left"><b>{{ answer.votes }}</b></big></div>
          <div class ="col-sm-1"><a class="btn btn-sm btn-success" data-toggle="tooltip" data-placement="top" title="Vote Up this answer" href="/vote/{{ user.id }}/{{ answer.id }}/{{ question.id }}/0/"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a> <a class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="bottom" title="Vote Down this answer" href="/vote/{{ user.id }}/{{ answer.id }}/{{ question.id }}/1/"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a></div>
        </div>
      </div>
      {% endif %}
      <div class ="col-md-9">
        <a href="/comment/{{ answer.id }}/" class="pull-right"><small><span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Comment &nbsp;</small></a>

        {% if answer.votes > 0 %}
        <div id="ans" class="alert alert-primary" role="alert">{{ answer.answer_text|markdown }}</div>
        {% elif answer.votes == 0 %}
        <div id="ans" class="alert alert-primary" role="alert">{{ answer.answer_text|markdown }}</div>
        {% else %}
        <div id="ans" class="alert alert-primary" role="alert">{{ answer.answer_text|markdown }}</div>
        {% endif %}

        {% if answer.comment_set %}
          {% for comment in answer.comment_set.all %}
          <p><b>{{ comment.comment_text }}</b><small>, <a href="/profile/{{ comment.user_data.user.id }}">{{ comment.user_data.user.username }}</a> <div class="pull-right">{{ comment.pub_date }}</div></small></p>
          <hr>
          {% endfor %}
        {% endif %}
      </div>
      <div class ="col-md-2">

        {% if answer.user_data.picture %}
        <img class="pull-right" src="{{ answer.user_data.picture }}">
        {% else %}
        <img class="pull-right" width="50px" height="50px" src="{% static "qa/user.png" %}">
        {% endif %}

        <p class="pull-right">- <b><a href="/profile/{{ answer.user_data.user.id }}">{{ answer.user_data.user.username }}</a> ({{ answer.user_data.points }})</b></p>
      </div>
    </div>
  <hr>
    {% endfor %}

<div class="pagination">
  <span class="step-links">
    {% if answers.has_previous %}
    <a href="?page={{ answers.previous_page_number }}">< Previous | </a>
    {% endif %}

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

    {% if answers.has_next %}
    <a href="?page={{ answers.next_page_number }}"> | Next ></a>
    {% endif %}
  </span>
</div>

{% else %}
<img class="pull-right" src="{% static "qa/question.jpg" %}" alt="question"/>
<center><h2>This question is still open, <a href="/answer/{{ question.id }}" role="button">Write answer!</a></h2></center>
{% endif %}


{% include "qa/footer.html" %}
