{% extends 'website/templates/base.html' %}
{% load static %}
{% load widget_tweaks %}
{% block content %}
    <h4>
        <span class="glyphicon glyphicon-pencil">
        </span> Create a new question . . .
    </h4>
    <hr>
    <form role="form" action="" method="POST">{% csrf_token %}
    {% with WIDGET_ERROR_CLASS='field_error' %}

    <p>
        Please enter the tutorial details. 
        <img id="ajax-loader" src="{% static 'website/images/ajax-loader.gif' %}" style="display:none;">
    </p>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3">
            {% render_field form.category class+="form-control"%} 
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3">
            {% render_field form.tutorial class+="form-control" disabled="disabled" %} 
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            {% render_field form.minute_range class+="form-control" disabled="disabled" %} 
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            {% render_field form.second_range class+="form-control" disabled="disabled" %} 
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <small><strong>
            <a id="similar-link" data-toggle="modal" data-target="#similarModal" href="#">
                0 similar questions
            </a>
            </strong></small>
        </div>
    </div>
    <hr>

    <p>Please enter your question details.</p>
    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                <label for="id_title">Title:</label>
                {% render_field form.title class+="form-control" %} 
            </div>
            <div class="form-group">
                <label for="id_body">Question:</label>
                {% render_field form.body class+="form-control" %}
            </div>
        </div>
    </div>
    <input class="btn btn-success" type="submit" value="Submit Question"> 
    {% endwith %}
    </form>

    <!-- Modal -->
    <div class="modal fade" id="similarModal" tabindex="-1" role="dialog" aria-labelledby="similarModalLabel" 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">Similar Questions</h4>
          </div>
          <div class="modal-body" id="modal-body">
            ...
          </div>
        </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/custom.js' %}"></script>
{% endblock %}