{% load i18n %}
    <div id='multimedia_list'>
    {% for formset in formsets %}
        {{ formset.management_form }}
        {% if formset.errors %}<div class='errors'>
        {% for dict in formset.errors %}
            {% for error in dict.values %}
                {{ error }}
            {% endfor %}
        {% endfor %}
        </div>{% endif %}
    {% endfor %}
        <ul id='multimedia_list_content'>
    {% for formset in formsets %}
        {% for frm in formset%}
            {% if not forloop.last %}
            <li class='{% if forloop.parentloop.counter0 %}picture{%else%}multimedia{%endif%}'>
            {%if forloop.first %}{% for hidden in frm.hidden_fields %}
              {{ hidden }}
            {% endfor %}{% endif %}
            {% for field in frm.visible_fields %}
            {% if field.name == "name" %}
                <span class='value'>{{ field.value }}</span>
                <img class='remove-media' alt='Remove media' src='{{STATIC_URL}}saclay/images/close.png'/>
            {% endif %}
                <span class='hidden'>{{field}}</span>
            {% endfor %}
            </li>
            {% endif %}
        {% endfor %}
    {% endfor %}
        </ul>
    </div>
    <div id='multimedia_form' title="{% trans "Add multimedia from your computer or a website"%}">
        {%comment%}<div class='notice'>{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu luctus ipsum. Donec vel urna a turpis consectetur consectetur. Vestibulum ut enim vel odio porta vulputate." %}
        </div>{%endcomment%}
        <div class="fieldWrapper">
            <label for="multimedia_name">{% trans "Name" %}</label>
            <input type='text' id='multimedia_name' name='multimedia_name' value=" ">
        </div>
        <div class="fieldWrapper">
        <input type='radio' value='image' id='media_type_image' name="multimedia_type"> <label for='media_type_image'>{% trans "Image" %}</label>
        <input type='radio' value='other' id='media_type_other' name="multimedia_type"> <label for='media_type_other'>{% trans "Audio, video, other..." %}</label>
        </div>
        <div class="fieldWrapper">
        <label id="multimedia_file_label">{% trans "Download"%}</label> <input type='file' size='15' name='picture-0-picture' id='picture-0-picture' class='multimedia_file'>
        <p class='notice'>{% trans "Or" %}</p>
        <label for='multimedia_url'>{% trans "Web address"%}</label> <input type='text' name='multimedia_url' id='multimedia_url'>
        </div>
        <span id='add_media'>{% trans 'Add'%}</span>
    </div>
    <script text='text/javascript'>
    <!--
        $(function(){
            $(".remove-media").click(function(){
                $(this).parents('li').remove();
            });
            var current_image_number = 0;
            var current_multi_number = 0;
            $("#multimedia_form").dialog({autoOpen:false,
                                          modal:true,
                                          resizable:false,
                                          dialogClass:'no-titlebar-small',
                                          width:300});
            $('#head_multimedia').click(function(){
                $("#multimedia_form").dialog("open");
                return false;
            });
            $('#media_type_image').click(function(){
                $("#multimedia_file_label").removeClass('disabled');
                $("#multimedia_file").removeAttr('disabled');
            });
            $('#media_type_other').click(function(){
                $("#multimedia_file_label").addClass('disabled');
                $("#multimedia_file").attr('disabled', 'disabled');
            });
            $('#add_media').click(function(){
                // test the validity
                if (!$('#multimedia_name').val()){
                    alert("{% trans "You must provide a name." %}")
                    return false;
                }
                if (!$('#media_type_image:checked').val() && 
                        !$('#media_type_other:checked').val()){
                    alert("{% trans "You must choose a media type." %}")
                    return false;
                }
                if ($('#media_type_image:checked').val()
                        && !$("#picture-"+current_image_number+"-picture").val()
                        && !$("#multimedia_url").val()){
                    alert("{% trans "You must provide a file or a web address." %}")
                    return false;
                }
                if ($('#media_type_other:checked').val()
                        && !$("#multimedia_url").val()){
                    alert("{% trans "You must provide a web address." %}")
                    return false;
                }
                // recopy field in the main form
                var prefix = '';
                var contener = $("#multimedia_list_content")
                content = '<li';
                if ($('#media_type_image:checked').val()){
                    content += ' class="picture">';
                    prefix = 'picture-' + current_image_number;
                } else {
                    content += ' class="multimedia">';
                    prefix = 'multimedia-' + current_multi_number;
                    content += '<input type="hidden" name="'+prefix+'-multimedia_type" value="{{auto_type_id}}" />\n';
                    content += '<input type="hidden" name="'+prefix+'-url" value="'+$("#multimedia_url").val()+'" />\n';
                }
                content += '<input type="hidden" name="'+prefix+'-id"/>\n';
                content += '<input type="hidden" name="'+prefix+'-miniature" value="1"/>\n';
                content += '<input type="hidden" name="'+prefix+'-DELETE" value=""/>\n';
                content += '<input type="hidden" name="'+prefix+'-name" value="'+ $("#multimedia_name").val() +'"/>\n';
                content += $("#multimedia_name").val();
                content += " <img class='remove-media' alt='Remove media' src='{{STATIC_URL}}saclay/images/close.png'/>";
                content += '</li>';
                contener.append(content);
                if ($('#media_type_image:checked').val()
                        && $("#picture-"+current_image_number+"-picture").val()){
                    // the file field cannot be recopied - security issue
                    // so it is moved
                    var file_item = $('#picture-'+current_image_number+'-picture');
                    var cloned = file_item.clone(true);
                    file_item.hide();
                    cloned.insertAfter(file_item);
                    file_item.appendTo($("#multimedia_list_content li").last());
                    current_image_number += 1;
                    cloned.attr('id', 'picture-'+current_image_number+'-picture');
                    cloned.attr('name', 'picture-'+current_image_number+'-picture');
                    cloned.val('');
                    $('#id_picture-TOTAL_FORMS').val(current_image_number + 1);
                } else {
                    current_multi_number += 1;
                    $('#id_multimedia-TOTAL_FORMS').val(current_multi_number + 1);
                }
                // empty the fields
                $("#multimedia_name").val('');
                $("#multimedia_url").val('');
                $("#media_type_image").prop('checked', '');
                $("#media_type_other").prop('checked', '');
                $("#multimedia_form").dialog("close");
                $(".remove-media").click(function(){
                    $(this).parents('li').remove();
                });
                return false;
            });
        });
    // -->
    </script>