{% extends 'base_app.html.twig' %}

{% block body %}
    {% form_theme form 'bootstrap_3_horizontal_layout.html.twig' %}  
    <h1>PlanificacionSeccion creation</h1>
     
    {{ form_start(form) }}
    {{ form_row(form.seccion) }}
    {{ form_row(form.idtemaUc) }}
    
        <ul class="contenido" data-prototype="{{ form_widget(form.contenido.vars.prototype)|e('html_attr') }}">
            
        </ul>
        
        <input type="submit" value="Create" />
    {{ form_end(form) }}

    <ul>
        <li>
            <a href="{{ path('ceapp_docente_planificacion_index') }}">Back to the list</a>
        </li>
    </ul>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        
        var $collectionHolder;

        // setup an "add a tag" link
        var $addContenidoLink = $('<a href="#" class="add_contenido_link">Añadir conceptos</a>');
        var $RemoveContenidoLink = $('<a href="#" class="remove_contenido_link">Quitar Conceptos</a>');
        
        var $newLinkLi = $('<li></li>').append($addContenidoLink);
        //$newLinkLi. = $('<li></li>').append($RemoveContenidoLink);
        
        
        jQuery(document).ready(function() {
            // Get the ul that holds the collection of tags
            $collectionHolder = $('ul.contenido');

            // add the "add a tag" anchor and li to the tags ul
            $collectionHolder.append($newLinkLi);

            // count the current form inputs we have (e.g. 2), use that as the new
            // index when inserting a new item (e.g. 2)
            $collectionHolder.data('index', $collectionHolder.find(':input').length);

            $addContenidoLink.on('click', function(e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addContenidoForm($collectionHolder, $newLinkLi);
            });
            
                       
            
            function addContenidoForm($collectionHolder, $newLinkLi) {
                 // Get the data-prototype explained earlier
                    var prototype = $collectionHolder.data('prototype');

                    // get the new index
                    var index = $collectionHolder.data('index');

                    // Replace '$$name$$' in the prototype's HTML to
                    // instead be a number based on how many items we have
                    var newForm = prototype.replace(/__name__/g, index);

                    // increase the index with one for the next item
                    $collectionHolder.data('index', index + 1);

                    // Display the form in the page in an li, before the "Add a tag" link li
                    var $newFormLi = $('<li></li>').append(newForm);

                    // also add a remove button, just for this example
                    $newFormLi.append('<a href="#" class="remove-tag">x</a>');

                    $newLinkLi.before($newFormLi);

                    // handle the removal, just for this example
                    $('.remove-tag').click(function(e) {
                        e.preventDefault();

                        $(this).parent().remove();

                        return false;
                    });
               
                
            }
            
            
            
        });
        
        
        
        
        
        


        
    </script>
{% endblock %}