{% extends "admin/base.html.twig" %}

{% block content %}
    <section>
        <h1 class="text-color-blue">Création d'une notation</h1>
    </section> {# Title #}
    <section class="container">
        {{form_start(ratingForm)}}
        {{form_row(ratingForm.atos)}}
        {{form_row(ratingForm.name)}}
        <h6>Notes</h6>
        <ul class="ratingValues list-unstyled" data-prototype="{{ form_widget(ratingForm.ratingValues.vars.prototype)|e('html_attr') }}">
            {% for ratingValue in ratingForm.ratingValues %}
                <li>{{form_row(ratingValue)}}</li>
            {% endfor %}
        </ul>
        <div class="text-center">
            <button class="btn btn-success">Créer la notation</button>
        </div>
        {{form_end(ratingForm)}}
    </section> {# form #}
{% endblock %}

{% block javascripts %}
    <script>
        var $collectionHolder;

        // setup an "add a tag" link
        var $addTagButton = $('<a class="add_tag_link text-success"><i class="icon-plus h1"></i></a>');
        var $newLinkLi = $('<li class="no"></li>').append($addTagButton);

        $(document).ready(function() {
            // Get the ul that holds the collection of tags
            $collectionHolder = $('ul.ratingValues');

            // 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);

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

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

            var newForm = prototype;
            // You need this only if you didn't set 'label' => false in your tags field in TaskType
            // Replace '__name__label__' in the prototype's HTML to
            // instead be a number based on how many items we have
            // newForm = newForm.replace(/__name__label__/g, index);

            // Replace '__name__' in the prototype's HTML to
            // instead be a number based on how many items we have
            newForm = newForm.replace(/__name__/g, index);
            $fielvalidateExercise = '#rating_ratingValues_' + index + '_ValidateExercise'
            // 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);
            $newLinkLi.before($newFormLi);

            $fieldValidateExercise = $($(newForm).find('input' + $fielvalidateExercise)[0])
        }
    </script>
{% endblock %}