{% extends "django_messages/base.html" %} 
{% load i18n %} 
{% load staticfiles %}
{% block extrajs %}
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap-theme.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap_namespaced.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/courses.css" %}"/>

    <link rel="stylesheet" type="text/css" href="{% static "css/token-input.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/token-input-facebook.css" %}"/>

    <link rel="stylesheet" type="text/css" href="{% static "js/jquery-1.11.0.min.js" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "js/jquery.tokeninput.js" %}"/>

    <script type="text/javascript">
        // https://github.com/philippWassibauer/django-threaded-messages/ ... compose.html
        $().ready(function() {
            var recipient =  $("#id_recipient").val();
            $("#id_recipient").val("")
            $("#id_recipient").tokenInput("{% url recipient_search %}?format=json", {
                classes: {
                    tokenList: "token-input-list-facebook",
                    token: "token-input-token-facebook",
                    tokenDelete: "token-input-delete-token-facebook",
                    selectedToken: "token-input-selected-token-facebook",
                    highlightedToken: "token-input-highlighted-token-facebook",
                    dropdown: "token-input-dropdown-facebook",
                    dropdownItem: "token-input-dropdown-item-facebook",
                    dropdownItem2: "token-input-dropdown-item2-facebook",
                    selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
                    inputToken: "token-input-input-token-facebook"
                },
                {% if recipient %}
                prePopulate: [{id:recipient, name:recipient}],
                {% endif %}
                hintText: "{% trans "Type in a search term" %}",
                noResultsText: "{% trans "No results" %}",
                searchingText: "{% trans "Searching" %}...",
                queryParam: "term",
            });

            $("#id_recipient").focus()
        });
    </script>
{% endblock %}
{% block messages_subtitle %}
{% trans "Compose Message"%}
{% endblock %}
{% block messages_content %} 

<form action="" method="post" role="form">
    {% csrf_token %} 
    {% if form.non_field_errors %}
    <div class="form-group">
        <label class="col-sm-2 col-md-2 col-lg-2 control-label">Errors</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
            {{ form.non_field_errors }}
        </div>
    </div>
    {% endif %}

    <div class="form-group">
        <label for="id_recipient">To:</label>
        <br />
        {{ form.recipient }}
        {{ form.recipient.errors }}
    </div>

    <div class="form-group">
        <label for="id_subject">Subject:</label>
        <br />
        {{ form.subject }}
        {{ form.subject.errors }}
    </div>

    <div class="form-group">
        <label for="id_body">Body:</label>
        {{ form.body }}
        {{ form.body.errors }}
    </div>

    <div class="form-group">
        <input class="btn btn-success" type="submit" value="{% trans "Send" %} &raquo;"/>
    </div>
</form>

{% endblock %}