{% extends 'base.html' %}
{% load i18n %}


{% block media %}
    {{ formset.media }}
{% endblock %}

{% block content %}

<span class = 'heading'>{% trans "Manage Component" %}</span>
<div class = 'clear'></div>
<form method="post" action="">
    {{ formset.management_form }}
   
    <div class = 'left'>
    <div class = 'required'>
        
        <input type="hidden" name="exclude" value="{{ product_id }}" id="exclude" />
        <h2>{% trans "Main Info" %}</h2>
            <fieldset id="components">
            {% for form in formset.forms %}
                <div class="component">
              {{ form.id }}              
              <div>
                    {{ form.number.label_tag }}
                    {{ form.number }}
                  {% if form.number.errors %}
                    {{ form.number.errors }}
                  {% endif %}
              </div> 
              <div>

                    {{ form.component.label_tag }}
                    {{ form.component|safe }}
                  {% if form.component.errors %}
                    {{ form.component.errors }}
                  {% endif %}
              </div> 
              <div>
                    {{ form.DELETE }}
                    {{ form.DELETE.label_tag }}
              </div> 
              </div>           
            {% endfor %}
            </fieldset>
            <p>
            <a href = '' class = 'addRowComponent' id = 'addRowComponent'>{% trans "Add another item" %}</a>
            </p>
            </div>
            <div class = 'clear'></div>            
            <p style="margin-top:10px;">
            <input type="submit" value="{% trans "Submit" %}" id="" />
            </p>
    </div>
    
</form>
<script type="text/javascript">           
$(document).ready(function() {   
    $('.autocomplete').autocomplete('/dictionary/autocomplete/', {
        extraParams: {
            search_fields: 'name',
            app_label: 'inventory',
            model_name: 'product',
        },
    }).result(function(event, data, formatted) {
        alert($this);
        if (data) {
            $('#real_dictionaryitem_set-1-component').val(data[1]);
        }
    });
});
</script>
    
{% endblock %}