{% for configurationsRow in socialSettings.configurations|batch( 4 ) %}
	{% for configuration in configurationsRow %}
		{% if configuration.id == source_id %}
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h2 class="title">Configuration {{ network }}</h2>
						<p>Compte: <strong>{{ configuration.account_name }}</strong>
                        <span class="small">(@{{ configuration.account_username }})</span></p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12 blc-source-network">
							{% if network == 'instagram' %}
								{% set feedLabel = 'Entrer un hashtag par champ, sans le #' %}
								{% set addNewfeedLabel = 'Ajouter un nouveau hashtag' %}
							{% endif %}

							<form id="target" role="form" method="POST" role="form" method="POST" action="{{ path('event_network_source_id_edit', { 'event' : event.id, 'network' : network, 'source_id' : source_id }) }}">

								<!-- INSTAGRAM -->
								{% if network == 'instagram' %}
									<h4>Hashtags</h4>
								{% endif %}

								<div id="hashtags-block" class="collection-block-network" data-prototype="{{ form_widget(formHashtag.instagram.vars.prototype)|e }}">
									<p class="help-block">{{ feedLabel | raw }}</p>
									{% for hashtag in formHashtag.instagram %}
									<div class="item-row hashtag form-group">
										{{ form_widget(hashtag) }}
									</div>
									{% endfor %}
								</div>

								{% if formHashtag.instagram|length == 0 %}
									{% set count = 0 %}
								{% else %}
									{% set count = formHashtag.instagram|keys|last + 1 %}
								{% endif %}

								<button type="button" id="add-another-hashtag" data-item-count="{{ count }}" class="btn btn-default add-another-hashtag">{{ addNewfeedLabel }}</button>

								{{ form_widget(formHashtag._token) }}

								<hr />
								<div class="form-group ">
									<input type="submit" value="{% trans %}Sauvegarder{% endtrans %}" class="btn btn-primary btn-source-network" />
								</div>
							</form>
					</div>
				</div>
			</div>
		{% endif %}
	{% endfor %}
{% endfor %}


<script>
    var $collectionHolder;
    
    //setup an "add a tag" link
    var $addTagLink = $('.add-another-hashtag');
    var $newLinkLi = $('<div></div>').append($addTagLink);
    
    jQuery(document).ready(function() {
     // Get the ul that holds the collection of tags
     $collectionHolder = $('div.collection-block-network');

     // add a delete link to all of the existing tag form li elements
     $collectionHolder.find('.hashtag').each(function() {
         addTagFormDeleteLink($(this));
     });

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

     $addTagLink.on('click', function(e){
	     e.preventDefault();
	     addTagForm($collectionHolder);
     })
    
     function addTagForm($collectionHolder) {
 
    	    // Get the data-prototype explained earlier
    	    var prototype = $collectionHolder.data('prototype');

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

    	    var newForm = prototype;

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

    	    // 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 = $('<div class="instructions-content-row item-row form-group"></div>').append(newForm);
	    	$newLinkLi.before($newFormLi);
    	    // add a delete link to the new form
    	    addTagFormDeleteLink($newFormLi);
    	}

         function addTagFormDeleteLink($tagFormLi) {

        	    var $removeFormA = $('<button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Supprimer</button>');
        	    $tagFormLi.append($removeFormA);
    
        	    $removeFormA.on('click', function(e) {
        	        // prevent the link from creating a "#" on the URL
        	        e.preventDefault();
    
        	        // remove the li for the tag form
        	        $tagFormLi.remove();
        	    });
        	} 

		});
</script>