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

{% block title %}New Parent Game{% endblock %}

{% block body %}
    <h1>Parent Game</h1>

      {{ form_start(form) }}

        {{ form_row(form.nbPlayer) }}
        {{ form_row(form.online) }}
        {{ form_row(form.lan) }}
        {{ form_row(form.pegi) }}
        {{ form_row(form.cero) }}
        {{ form_row(form.genres) }}


        <span
          class="add_game_btn btn btn-info"
          data-list-selector="#games-list-fields">
          Add a game
        </span>

        <ul
          id="games-list-fields"
          data-prototype="{{ form_widget(form.games.vars.prototype)|e('html_attr') }}"
          data-widget-tags="{{ '<li></li>'|e }}"
          data-widget-counter="{{ form.games|length }}">

          {% for game in form.games %}
            <li>
            {{ form_errors(game) }}
            {{ form_widget(game) }}
            </li>
          {% endfor %}
        </ul>

      {{ form_end(form) }}
{% endblock %}


{% block js %}

  <script>
    $(function () {
      $('.add_game_btn').click(function (e) {
        var list = $($(this).attr('data-list-selector'));
        // Try to find the counter of the list or use the length of the list
        var counter = list.data('widget-counter') || list.children().length;

        // grab the prototype template
        var newWidget = list.attr('data-prototype');
        // replace the "__name__" used in the id and name of the prototype
        // with a number that's unique to your emails
        // end name attribute looks like name="contact[emails][2]"
        newWidget = newWidget.replace(/__name__/g, counter);
        // Increase the counter
        counter++;
        // And store it, the length cannot be used if deleting widgets is allowed
        list.data('widget-counter', counter);

        // create a new list element and add it to the list
        var newElem = $(list.attr('data-widget-tags')).html(newWidget);
        newElem.appendTo(list);
      });
    });
  </script>

{% endblock %}