{% extends "base/base.html" %}
{% load url from future %}


{% block title %}Create {{ opts.verbose_name.title }}{% endblock title %}


{% block header %}Create {{ opts.verbose_name.title }}{% endblock header %}

{% block links %}
    <a class="btn" href="..">Back</a>
{% endblock links %}

{% block detail %}
<form class="form-horizontal" action="." method="post">{% csrf_token %}
    {% block form %}
    {% include "forms/bootstrap.html" %}
    {% endblock form %}

    {% for inline in inlines %}
    {{ inline }}
    {% endfor %}
         
    <div class="form-group">
        <label class="col-lg-2"></label>
        <div class="col-lg-10">
	        <button>
	            {% block button-text %}Create {{ opts.verbose_name.title }}{% endblock button-text %}
	        </button>        
        </div>
    </div>
</form>
{% endblock detail %}


{% block extrastyles %}
<link rel="stylesheet" href="{{ STATIC_URL }}select2/select2.css" />
{% endblock extrastyles %}


{% block extrascripts %}
<script src="{{ STATIC_URL }}select2/select2.js"></script>
<script src="{{ STATIC_URL }}scripts/jquery.formset.min.js"></script>
<script>
function setupSelect2() {
    var options = {};
    if ($(this).attr("data-url")) {
        options.minimumInputLength = 3;
        options.ajax = { 
            url: $(this).attr("data-url"),
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                };
            },
            results: function (data, page) { // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                return {results: data};
            }
        };
        
        var add_url = $(this).attr("data-add-url");        
        if (add_url) {        	
	        options.formatNoMatches = function(term) {
	    	    return 'No maches found. <a target="_blank" href="' + add_url + '">Create `' + term + '`</a>';
	        }
        }
        
        options.initSelection = function(element, callback) {
            callback({id: element.val(), text: element.attr("data-text")});
        };
        
        /*
            initSelection: function(element, callback) {
                // the input tag has a value attribute preloaded that points to a preselected movie's id
                // this function resolves that id attribute to an object that select2 can render
                // using its formatResult renderer - that way the movie name is shown preselected
                var id=$(element).val();
                if (id!=="") {
                    $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", {
                        data: {
                            apikey: "ju6z9mjyajq2djue3gbvv26t"
                        },
                        dataType: "jsonp"
                    }).done(function(data) { callback(data); });
                }
            },*/
            
        options.escapeMarkup = function (m) { return m; }; // don't escape
        console.log(options);
        
    }
    $(this).select2(options);
}
$(function() {

	// {% for inline in inlines %}
	$('#{{ inline.opts.object_name }}-inline tbody tr').formset({
	   prefix: '{{ inline.formset.prefix }}',
	   formCssClass: 'dynamic-formset{{ forloop.counter }}',
	   added: function(tr) {
	       $(tr).find(".select2").each(setupSelect2);
	   }
	});
	// {% endfor %}

	$(".select2").each(setupSelect2);
})
</script>
{% endblock extrascripts %}
