{% extends 'website/templates/base.html' %}
{% load static %}
{% load widget_tweaks %}
{% block content %}
<div class="question {% ifequal question.user|stringformat:'s' user|stringformat:'s' %}editable{% endifequal %}">
    <div class="title">
       <a href=""> {{ question.title }} </a>
    </div>

    <div id="questionNicPanel"></div>
    <div id="{% ifequal question.user|stringformat:'s' user|stringformat:'s' %}questionInstance{% endifequal %}" 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">
        <small>
            <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}">
                {{ question.minute_range }} min
            </a>
        </small>
    </span>

    <span class="second_range">
        <small>
            <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}">
                {{ question.second_range }} sec
            </a>
        </small>
    </span>
    
    <span class="modify">
        {% ifequal question.uid|stringformat:'s' user.id|stringformat:'s' %}
            <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>
        {% endifequal %}
    </span>

    <span class="meta">
        <small>
                <i>
                    {{ question.date_created|date:"y-d-m" }}, {{ question.date_created|time }}
                </i>
        </small>

        <span class="user">
            {{ question.user }}
        </span>
    </span>
    </div> <!-- /.question -->

<h4><u>Answers:</u></h4>

<div id="replyPanelWrapper" style="display:none;">
    <div id="replyNicPanel" style="display:none;"></div>
</div>

{% for reply in replies %}
    <div class="reply {% ifequal reply.uid|stringformat:'s' user.id|stringformat:'s' %}editable{% endifequal %}" id="reply{{reply.id}}">
        
        <div class="body" id="body{{ reply.id }}">
            {{ reply.body|safe }}
        </div>

        <span class="user">
            {{ reply.user }}
        </span>

        {% ifequal reply.uid|stringformat:'s' user.id|stringformat:'s' %}
        <span class="modify" style="display:block">
            <a class="edit btn btn-xs btn-info vs" href="#body{{ reply.id}}" data-target="body{{ reply.id }}">Edit</a>
            <a class="save btn btn-xs btn-success vs"  data-target="body{{ reply.id }}" data-rid="{{ reply.id }}" href="#">Save</a>
        </span>
        {% endifequal %}
    </div> <!-- /.reply -->
{% endfor %}

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

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