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

{% load permission_tags %}

{% block title %}
    {{ question.category }} - {{ question.title }} - Spoken Tutorial 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 %}">
        <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">
            {{ question.body|safe }}
        </div>
        <br>
        
        <span class="category">
            <small>
                <a href="{% url 'website:filter' question.category %}">
                    {{ question.category }}
                </a>
            </small>
        </span>
        
        <span class="tutorial">
            <small>
                <a href="{% url 'website:filter' question.category question.tutorial %}">
                    {{ question.tutorial}}
                </a>
            </small>
        </span>
        
        <span class="minute_range {% if question.minute_range == 'None' %}hideme{% endif %}">
            <small>
                <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}">
                    {{ question.minute_range }} min
                </a>
            </small>
        </span>
        
        <span class="second_range {% if question.minute_range == 'None' %}hideme{% endif %}">
            <small>
                <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}">
                    {{ question.second_range }} sec
                </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 in answers %}
<div class="row">
    <div class="answer-wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="answer {% if user|can_edit:answer  %}editable{% endif %}" id="answer{{answer.id}}">
            
            <div class="body" id="body{{ answer.id }}">
                {{ 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">
                    {{ 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">
            <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" id="comment{{ comment.id }}">
                    <div class="body" id="cbody{{ comment.id }}">
                        {{ comment.body|safe }}
                    </div>
                    
                    <span class="meta">
                        <small>
                            <i>
                                {{ comment.date_created|date:"d-m-y" }}, {{ comment.date_created|time }}
                            </i>
                        </small>
                        
                        <span class="user">
                            {{ 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" 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' %}" 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">
                    <div class="form-group">
                        {% render_field form.question value=question.id %}
                        <label for="id_body">Answer</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 }} 
            --&gt; {{ question.tutorial }} 
            {% if question.minute_range != 'None' %}
            --&gt; {{ question.minute_range }}
            {% endif %}
            {% if question.second_range != 'None' %}
            --&gt; {{ question.second_range}}
            {% endif %}
            
            <h5>Move the question to:</h5>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <select id="id_category" class="form-control">
                        <option value="Advanced-C++">Advanced-C++</option>
                        <option value="BASH">BASH</option>
                        <option value="Blender">Blender</option>
                        <option value="C-and-C++">C-and-C++</option>
                        <option value="CellDesigner">CellDesigner</option>
                        <option value="Digital-Divide">Digital-Divide</option>
                        <option value="Drupal">Drupal</option>
                        <option value="Firefox">Firefox</option>
                        <option value="GChemPaint">GChemPaint</option>
                        <option value="Geogebra">Geogebra</option>
                        <option value="GeoGebra-for-Engineering-drawing">GeoGebra-for-Engineering-drawing</option>
                        <option value="GIMP">GIMP</option>
                        <option value="GNS3">GNS3</option>
                        <option value="GSchem">GSchem</option>
                        <option value="Inkscape">Inkscape</option>
                        <option value="Java">Java</option>
                        <option value="Java-Business-Application">Java-Business-Application</option>
                        <option value="KiCad">KiCad</option>
                        <option value="KTouch">KTouch</option>
                        <option value="KTurtle">KTurtle</option>
                        <option value="LaTeX">LaTeX</option>
                        <option value="LibreOffice-Suite-Base">LibreOffice-Suite-Base</option>
                        <option value="LibreOffice-Suite-Calc">LibreOffice-Suite-Calc</option>
                        <option value="LibreOffice-Suite-Draw">LibreOffice-Suite-Draw</option>
                        <option value="LibreOffice-Suite-Impress">LibreOffice-Suite-Impress</option>
                        <option value="LibreOffice-Suite-Math">LibreOffice-Suite-Math</option>
                        <option value="LibreOffice-Suite-Writer">LibreOffice-Suite-Writer</option>
                        <option value="Linux">Linux</option>
                        <option value="Netbeans">Netbeans</option>
                        <option value="Ngspice">Ngspice</option>
                        <option value="OpenFOAM">OpenFOAM</option>
                        <option value="Orca">Orca</option>
                        <option value="Oscad">Oscad</option>
                        <option value="PERL">PERL</option>
                        <option value="PHP-and-MySQL">PHP-and-MySQL</option>
                        <option value="Python">Python</option>
                        <option value="Python-Old-Version">Python-Old-Version</option>
                        <option value="QCad">QCad</option>
                        <option value="R">R</option>
                        <option value="Ruby">Ruby</option>
                        <option value="Scilab">Scilab</option>
                        <option value="Selenium">Selenium</option>
                        <option value="Single-Board-Heater-System">Single-Board-Heater-System</option>
                        <option value="Spoken-Tutorial-Technology">Spoken-Tutorial-Technology</option>
                        <option value="Step">Step</option>
                        <option value="Thunderbird">Thunderbird</option>
                        <option value="Tux-Typing">Tux-Typing</option>
                        <option value="What-is-Spoken-Tutorial">What-is-Spoken-Tutorial</option>
                        <option value="Xfig">Xfig</option>
                        <option value="General">General FOSS</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <select id="id_tutorial" class="form-control" disabled>
                        <option value="None">Select a Tutorial</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <select id="id_minute_range" class="form-control" disabled>
                        <option value="None">min</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <select id="id_second_range" class="form-control" disabled>
                        <option value="None">sec</option>
                    </select>
                </div>
            </div> <!-- /.row -->
            <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 -->

<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>
{% endblock %}

{% block javascript %}
    <script src="{% static 'website/js/thread-user.js' %}"></script>
    <script src="{% static 'website/js/custom.js' %}"></script>
    <script>
        $(document).ready(function() {
            $vote = $(".vote");
            
            $vote.click(function() {
                if($(this).hasClass("upvote")) {
                    /* handle upvote click event */
                    if($(this).hasClass("voted")) {
                        $(this).removeClass("voted");
                    } else {
                        $(this).addClass("voted");
                        $(this).siblings(".downvote").removeClass("voted");
                    }
                } else {
                    /* handle downvote click event */
                    if($(this).hasClass("voted")) {
                        $(this).removeClass("voted");
                    } else {
                        $(this).addClass("voted");
                        $(this).siblings(".upvote").removeClass("voted");
                    }
                }
            });
        });
    </script>
{% endblock %}