{% extends 'website/templates/base.html' %}
{% load static %}
{% load count_tags %}

{% block content %}


	<script>

	    $(document).ready(function()
		{
		$("#myTable").tablesorter();
		}
	    );

	 </script>

    <h4> 
        <h5>
            Showing {{ questions.start_index }} - {{ questions.end_index }} of {{ questions.paginator.count }} questions.
        </h5>
    </h4>
       <table id="myTable" class="tablesorter-blue">
        <thead> 
	<tr> 
		<th>No.</th>
	        <th>FOSS</th>
		<th>Question </th>
		<th>Date</th>
		<th>Views</th>
		<th>Votes</th>
		<th>Answers</th>
		<th>User</th>  
	</tr> 
	</thead> 
	<tbody> 
        {% for question in questions %}
        <tr>
	    <td> </td>
            <td>
                <span class="category" data-toggle="tooltip" data-placement="top" >
               
                <a class="pull-left" href="{% url 'website:filter' question.category|lower %}?qid={{ question.id }}">
                 {{ question.category|truncatechars:12 }}   
                </a> 
                
                </span>
            </td>
          
            
            <td>
                <span class="question" data-toggle="tooltip" data-placement="top" >
                    <a href="{% url 'website:get_question' question.id %}">{{ question.title|truncatechars:40 }}</a>
                </span>            
            </td>
            
            <td>    
                <span>
                    <i>
                        {{ question.date_created|date:"d-m-y" }}
                    </i>
                </span>
            </td>
            
            <td>
                {{ question.views}}
            </td>
            <td>
            
            	 {{ question.num_votes}}
            	
            </td>
            
            <td>
                {{ question.answer_set.count }}
            </td>
            <td>
           
                <span class="title" data-toggle="tooltip" data-placement="top" >
                    {{ question.user|truncatechars:10 }}
                </span>
            </td>
        </tr>
        {% endfor %}
    </tbody> 
    </table>

    <ul class="pagination pull-right">
        {% if questions.has_previous %}
            <li><a href="?page={{ questions.previous_page_number }}">&laquo; <small>Prev</small></a></li>
        {% else %}
            <li class="disabled"><a href="#">&laquo;</a></li>
        {% endif %}
        
        {% for num in questions.paginator.page_range %}
            {% ifequal num questions.number %}
                <li class="active"><a href="#">{{ num }}<span class="sr-only">(current)</span></a></li>
            {% else %}
                <li><a href="?page={{ num }}">{{ num }}</a></li>
            {% endifequal %}
        {% endfor %}
        
        {% if questions.has_next %}
            <li><a href="?page={{ questions.next_page_number }}"><small>Next</small>&raquo;</a></li>
        {% else %}
            <li class="disabled"><a href="#">&raquo;</a></li>
        {% endif %}
    <ul>

{% endblock %}

{% block javascript %}
<script>
    $('span').tooltip();
    $('table tbody tr').each(function(idx){
                $(this).children(":eq(0)").html(idx + 1);
    });
</script>
{% endblock %}