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

{% load permission_tags %}

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

<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 -->

<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 {% if user|can_edit:reply  %}editable{% endif %}" id="reply{{reply.id}}">
        
        <div class="body" id="body{{ reply.id }}">
            {{ reply.body|safe }}
        </div>

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

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

        {% if user|can_edit:reply  %}
        <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>
        {% endif %}
    </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-sm 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 %}

    <!-- 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">
                    <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="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="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>
                    </select>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-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">
                    <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">
                    <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>
{% endblock %}