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

{% load permission_tags %}

{% block title %}
    {{ question.category }} - {{ question.title }} - FOSSEE Forums
{% endblock %}

{% block content %}
 
<span class="saving hideme">saving . . .</span>
<span class="saved hideme">saved</span>

<div class="row">
                        
    <div class="question-wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="question {% if user|can_edit:question %}editable{% endif %}" >
     <!-- VOTE CELL -->
 		
                
               
                   <div class="votecell" style="padding-top: 0.0cm;">
          		<div class="vote">
                            {% ifequal thisUserUpvote 0 %}
                                <img src="{% static 'website/images/up1-off.png' %}" class="vote-up"/>
                            {% else %}
                                <img src="{% static 'website/images/up1-on.png' %}" class="vote-up selected"/>
                            {% endifequal %}

                            <span class="vote-count-post" id="show_vote_count">
                                {{ net_count }}
                            </span>
                           

                            {% ifequal thisUserDownvote 0 %}
                                <img src="{% static 'website/images/down1-off.png' %}" class="vote-down" />
                            {% else %}
                                <img src="{% static 'website/images/down1-on.png' %}" class="vote-down selected" />
                            {% endifequal %}
                        </div>
                       
                  </div>
        <div class="title {% if user|can_edit:question %}title-editable{% endif %}">
           {{ question.title }}
        </div>
        
        <div id="title-edit" class="hideme">
        
            
            <h5>Title</h5>
            <input class="form-control" type="text">
            <h5>Question</h5>
        </div>
        
        <div id="questionNicPanel"></div>
        <div id="{% if user|can_edit:question  %}questionInstance{% endif %}" class="body"  style="margin-left : 60px">
            {{ question.body|safe }}
        </div>
        <br>
        
        <span class="category">
            <small>
                <a href="{% url 'website:filter' question.category %}">
                    {{ question.category }}
                </a>
            </small>
        </span>
      
        
        <a id="question-details-edit" data-toggle="modal" data-target="#detailsModal" href="#" class="hideme">
            <span class="glyphicon glyphicon-edit"></span>
        </a>
        
        <span class="modify">
            {% if user|can_edit:question  %}
                <a class="edit btn btn-xs btn-info" href="#">Edit</a>
                <a class="save btn btn-xs btn-success" data-qid="{{ question.id }}" href="#">Save</a>
            {% endif %}
        </span>
        
        <span class="meta">
            <small>
                <i>
                    {{ question.date_created|date:"d-m-y" }}, {{ question.date_created|time }}
                </i>
            </small>
            
            <span class="user">
                {{ question.user }}
            </span>
        </span>
       
    </div> <!-- /.question -->
    </div>
     
</div> <!-- /.row -->


<h4><u>Answers:</u></h4>
<div id="answerPanelWrapper" style="display:none;">
    <div id="answerNicPanel" style="display:none;"></div>
</div>

<div id="commentPanelWrapper" style="display:none;">
    <div id="commentNicPanel" style="display:none;"></div>
</div>



{% for answer,ans_vote in main_list %}

<div class="row">
    <div class="answer-wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="votecell" style="padding-top: 9px;">
           		
          		<div class="ans-vote" >
          		
                            {% ifequal ans_vote.0 0 %}
                                <img src="{% static 'website/images/up1-off.png' %}" class="ans-vote-up"  id="up{{ answer.id }}" title="This question shows research effort; it is useful and clear"/>
                            {% else %}
                                <img src="{% static 'website/images/up1-on.png' %}" class="ans-vote-up selected" id="up{{ answer.id }}" title="This question shows research effort; it is useful and clear"/>
                            {% endifequal %}
			    
                            <span class="vote-count-post" id="span{{ answer.id }}" >
                                {{ ans_vote.2 }}
                            </span>
                            {% ifequal ans_vote.1 0 %}
                                <img type="image" src="{% static 'website/images/down1-off.png' %}" class="ans-vote-down"  id="down{{ answer.id }}" title="This question does not show any research effort; it is not useful and unclear" />
                            {% else %}
                                <img src="{% static 'website/images/down1-on.png' %}" class="ans-vote-down selected" id="down{{ answer.id }}" title="This question does not show any research effort; it is not useful and unclear"/>
                            {% endifequal %}
                        </div>
                        </div>
        <div class="answer {% if user|can_edit:answer  %}editable{% endif %}" id="answer{{answer.id}}" style="margin-left: 63px;">
        		
           		
                       
                  
            <div class="body" id="body{{ answer.id }}" style="padding-bottom: 12px">
                {{ answer.body|safe }}
            </div>
            
            <span class="meta">
                <small>
                    <i>
                        {{ answer.date_created|date:"d-m-y" }}, {{ answer.date_created|time }}
                    </i>
                </small>
                
                <span class="user" style="background-color: #FFFFFF;padding: 2px 7px">
                    {{ answer.user }}
                </span>
            </span>
            {% if user|can_edit:answer  %}
            <span class="modify" style="display:block">
                <a class="edit btn btn-xs btn-info vs" href="#body{{ answer.id}}" data-target="body{{ answer.id }}">Edit</a>
                <a class="save btn btn-xs btn-success vs"  data-target="body{{ answer.id }}" data-aid="{{ answer.id }}" href="#">Save</a>
            </span>
            {% endif %}
        </div> <!-- /.answer -->
        
        <div class="row" style="padding-left: 40px">
            <div class="comments pull-right col-lg-11 col-md-11 col-sm-11 col-xs-11" >
                <!-- displaying comments -->
                {% for comment in answer.answercomment_set.all %}
                <div class="comment comment{{ comment.id }}">
                    <div class="body" id="cbody{{ comment.id }}">
                        {{ comment.body|safe }}
                    </div>
		    <br>
                    
                    <span class="meta_co" style="position: absolute;right: 0px; bottom: 0px;">
                        <small>
                            <i>
                                {{ comment.date_created|date:"d-m-y" }}, {{ comment.date_created|time }}
                            </i>
                        </small>
                        
                        <span style="padding: 2px 7px">
                            {{ comment.user }}
                        </span>
                    </span>
                    {% if user|can_edit:comment %}
                    <div class="modify-wrapper">
                        <span class="modify" style="display:block">
                            <a class="edit btn btn-xs btn-info vs" href="#cbody{{ comment.id }}" data-target="cbody{{ comment.id }}">Edit</a>
                            <a class="save btn btn-xs btn-success vs"  data-target="cbody{{ comment.id }}" data-cid="{{ comment.id }}" href="#">Save</a>
                        </span>
                    </div>
                    {% endif %}
                </div> <!-- /.comment -->
                {% endfor %}
                
                
                <!-- form to add comment -->
                {% if user.is_authenticated %}
                 
                <form id="form{{ answer.id }}" method="post" action="/answer-comment/"> {% csrf_token %}
                    <input type="hidden" name="answer_id" value="{{ answer.id }}">
                    <textarea name="body" class="new-comment form-control" id="comment{{ answer.id }}" rows="2"></textarea>
                </form>
                
               
                <a class="add-comment" style="background: #46B8DA none repeat scroll 0% 0%;color: #FFF;border-radius: 3px;padding: 5px 12px;" href="#" data-target="comment{{ answer.id }}">
                    <small>add comment</small>
                </a>
              
                 
                <a class="post-comment" href="#" data-target="comment{{ answer.id }}" data-aid="{{ answer.id }}" data-form="form{{ answer.id }}">
                    <small>post comment</small>
                </a>
                
                <a class="cancel-comment" href="#" data-target="comment{{ answer.id }}">
                    <small>cancel comment</small>
                </a>
               
                {% else %}
                <br>
                <a class="btn btn-xs btn-success vs" href="/accounts/login">
                    Login to add comment
                </a>
                {% endif %}
                 
            </div> <!-- comments -->
        </div> <!-- /.row -->
        <br> <hr>
    </div> <!-- /.answer-wrapper -->
</div> <!-- /.row -->
{% endfor %}

{% if user.is_authenticated %}
    <form action="{% url 'website:question_answer' question.id %}" method="POST"> {% csrf_token %}
        {% with WIDGET_ERROR_CLASS='field_error' %}
            <div class="row"> 
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                 {{ form.body.errors }}
                    <div class="form-group">
                        {% render_field form.question value=question.id %}
                        <label for="id_body"><h4><u>Your Answer:</u></h4></label>
                        {% render_field form.body class+='form-control' %}
                    </div>
                   
                </div>
            </div>
            
             
        {% endwith %}
        <input class="btn btn-sm btn-info" type="submit" value="Submit Answer">
    </form>
{% else %}
    <h4>
        <a class="btn btn-xs btn-success" href="{% url 'user_login'%}"><b>Log-in</b></a> to answer to this question.
    </h4> 
{% endif %}

    <!-- Modal -->
    <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Edit Question Details</h4>
          </div>
          <div class="modal-body">
            
            <h5>The Current question is under:</h5>
            {{ question.category }}
            <hr>
            <div class="pull-right">
                <a id="question-details-ok" class="btn btn-sm btn-success hideme" data-qid={{ question.id }} href="#">Ok</a>
                <a class="btn btn-sm btn-default" data-dismiss="modal" href="#">Close</a>
            </div>
            <div class="clearfix"></div>
          </div> <!-- /.modal-body -->
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!-- AJAX SCRIPT -->

   

{% endblock %}

{% block javascript %}
<script src="{% static 'website/js/nicEdit.js' %}" type="text/javascript"></script>
<script type="text/javascript">
    bkLib.onDomLoaded(function() {
        new nicEditor({
            iconsPath: "{% static 'website/js/nicEditorIcons.gif' %}",
            buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image', 'link']
        }).panelInstance('id_body');
    });
</script>
   
    <script type="text/javascript">


        /* For random color */
	$(".user_co").each(function() {
	    var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
	    $(this).css("background-color", hue);
	});

        $(document).ready(function() {
        
	 $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });

	/* VOTE FOR QUESTION */
	
        $('div.vote img.vote-up').click(function() {
            var id = {{ question.pk }};
            var vote_type = 'up';
		
            /* USER HAS ALREADY VOTED */

            if ($(this).hasClass('selected')) {
                var vote_action = 'recall-vote'

                $.post('/vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {

                    $('img.vote-up').removeAttr('src')
                        .attr('src', '{% static 'website/images/up1-off.png' %}')
                        .removeClass('selected');
                    $('div.vote span.vote-count-post').html(response);
                    $('img.vote-down').css('pointer-events','all');
                });
            }
            /* USER WISHES TO VOTE */
            else {
                var vote_action = 'vote'
                $.post('/vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {

                    $('img.vote-up').removeAttr('src')
                        .attr('src', '{% static 'website/images/up1-on.png' %}')
                        .addClass('selected');
                    $('div.vote span.vote-count-post').html(response);
                    $('img.vote-down').css('pointer-events','none');
                });
            }
        });

        /* DOWNVOTE */

        $('div.vote img.vote-down').click(function() {

            var id = {{ question.pk }};
            var vote_type = 'down';
		
            /* USER HAS ALREADY DOWN-VOTED */

            if ($(this).hasClass('selected')) {
                var vote_action = 'recall-vote'

                $.post('/vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {

                    $('img.vote-down').removeAttr('src')
                        .attr('src', '{% static 'website/images/down1-off.png' %}')
                        .removeClass('selected');
                    $('div.vote span.vote-count-post').html(response);
                    $('img.vote-up').css('pointer-events','all');
                });
            }
            /* USER WISHES TO VOTE */
            else {
                var vote_action = 'vote'
                $.post('/vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {

                    $('img.vote-down').removeAttr('src')
                        .attr('src', '{% static 'website/images/down1-on.png' %}')
                        .addClass('selected');
                    $('div.vote span.vote-count-post').html(response);
                    $('img.vote-up').css('pointer-events','none');
                });
            }
        });
        
       /* VOTE FOR ANSWERS */
        
       /* UP VOTE */
       $('div.ans-vote img.ans-vote-up').click(function(event) {
       
            var up_id = event.target.id;
            var vote_type = 'up';
            
            var id = up_id.replace('up','');
           
            if ($('img#'+up_id).hasClass('selected')) {
                var vote_action = 'recall-vote'

                $.post('/ans_vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {

                    $('img#'+up_id).removeAttr('src')
                        .attr('src', '{% static 'website/images/up1-off.png' %}')
                        .removeClass('selected');
                   
                    $('span#span'+id).html(response);
                   
                    $('img#down'+id).css('pointer-events','all');
                   
                });
                
            }
            
            /* USER WISHES TO VOTE */
            else {
            
                 var vote_action = 'vote'
                 $.post('/ans_vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {

                    $('img#'+up_id).removeAttr('src')
                        .attr('src', '{% static 'website/images/up1-on.png' %}')
                        .addClass('selected');
                   
                    $('span#span'+id).html(response);
                    $('img#down'+id).css('pointer-events','none');
                    
                    
                });
            }
          
        }); /* END OF UP VOTE FOR ANSWERS */
        
        /* DOWNVOTE */

        $('div.ans-vote img.ans-vote-down').click(function(event) {

            var down_id = event.target.id;
            var vote_type = 'down';
            
            var id = down_id.replace('down','');
           
           
            /* USER HAS ALREADY DOWN-VOTED */
	
            if ($('img#'+down_id).hasClass('selected')) {
                var vote_action = 'recall-vote'
		
                $.post('/ans_vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {
		   
                    $('img#'+down_id).removeAttr('src')
                        .attr('src', '{% static 'website/images/down1-off.png' %}')
                        .removeClass('selected');
                  
                    $('div.ans-vote span#span'+id).html(response);
                  
                    $('img#up'+id).css('pointer-events','all')
                    
                });
            }
            /* USER WISHES TO VOTE */
            else {
                var vote_action = 'vote'
                $.post('/ans_vote_post/', {id:id, type:vote_type, action:vote_action}, function(response) {

                    $('img#'+down_id).removeAttr('src')
                        .attr('src', '{% static 'website/images/down1-on.png' %}')
                        .addClass('selected');
                   
                    $('div.ans-vote span#span'+id).html(response);
                    $('img#up'+id).css('pointer-events','none')
                    
                });
            }
        });
           
     });
     
     
 
  </script>
   
    <script src="{% static 'website/js/thread-user.js' %}"></script>
    <script src="{% static 'website/js/custom.js' %}"></script>
{% endblock %}