{% extends "base.html" %}

{% block page_title %}.: New Program Line :.{% endblock %}

{% block title %}Program{% endblock %}

{% block content %}

<hr class="m-t">

<form action="/program/{{ action }}" method="post" class="form-horizontal" id="formulaire" name="formulaire">
    {% csrf_token %}
    <div class="form-group {% if form.gymnast.errors %}has-error has-feedback{% endif %}"> 
        <label for="id_name" class="col-sm-2 control-label">Gymnast</label>
        <div class="col-sm-10">
            {{ form.gymnast }}
            {{ form.gymnast_related }}
            {% if form.gymnast.errors %}
                <span class="btn btn-sm btn-danger-outline">
                    {% for error in form.gymnast.errors %}{{error}}{% endfor %}
                </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group {% if form.date.errors %}has-error has-feedback{% endif %}"> 
        <label for="id_dateend" class="col-sm-2 control-label">Date</label>
        <div class="col-sm-10">
            <div class="btn-toolbar-item input-with-icon">
                {{ form.date }}
                <span class="icon icon-calendar"></span>
            </div>&nbsp;{% if form.date.errors %}<span class="btn btn-sm btn-danger-outline">{% for error in form.date.errors %}{{error}}{% endfor %}</span>{% endif %}
        </div>
    </div>
    <div class="form-group {% if form.order.errors %}has-error has-feedback{% endif %}"> 
        <label for="id_eventtype" class="col-sm-2 control-label">Order</label>
        <div class="col-sm-10">
            {{ form.order }}
            {% if form.order.errors %}<span class="btn btn-sm btn-danger-outline">{% for error in form.order.errors %}{{error}}{% endfor %}</span>{% endif %}
        </div>
    </div>
    <div class="form-group {% if form.todo.errors %}has-error has-feedback{% endif %}">
        <label for="id_place" class="col-sm-2 control-label">Todo</label>
        <div class="col-sm-10">
            {{ form.todo }}
            {% if form.todo.errors %}&nbsp;<span class="btn btn-sm btn-danger-outline">{% for error in form.todo.errors %}{{error}}{% endfor %}</span>{% endif %}
        </div>
    </div>
    <div class="form-group {% if form.content.errors %}has-error has-feedback{% endif %}">
        <label for="id_content" class="col-sm-2 control-label">Information</label>
        <div class="col-sm-10">
            {{ form.content }}
            {% if form.content.errors %}&nbsp;<span class="btn btn-sm btn-danger-outline">{% for error in form.content.errors %}{{error}}{% endfor %}</span>{% endif %}
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-6 col-sm-6">
            <input type="submit" value="Save" class="btn btn-primary-outline" />
        </div>
    </div>
</form>

<script type="text/javascript" >
    $(function(){

        $('#id_gymnast_related').autocomplete({
            source: function(request, response) {
                $.ajax({
                    // context: this,
                    url: '/gymnast/lookup/?pattern=' + $('#id_gymnast_related').val(),
                    dataType: "json",
                    success: function(data) {
                        if(data.length != 0) {
                            response($.map(data, function(item) {
                                return {
                                    label: item.Name,
                                    value: item.Name,
                                    gymnastid: item.ID
                                }
                            }))
                        } else {
                            response([{ label: 'No result found.', value: '' }]);
                        };
                    },

                    error: function (exception) {
                        console.log(exception);
                        // response([]);
                    }
                });
            },
            minLength: 3,
            select: function (event, ui) {
                $($(this).data('ref')).val(ui.item.gymnastid);
            }
        });
    });
</script>

{% endblock %}