	{# 	
	Keosu is an open source CMS for mobile app
	Copyright (C) 2014  Vincent Le Borgne, Pockeit

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
    #}

{% extends 'KeosuCoreBundle:MainViews:content.html.twig' %}
{% form_theme form 'KeosuCoreBundle:Form:fields-image.html.twig' %}

{% block title %}
Edit picture
{% endblock %}

{% block content %}
<script type="text/javascript">
	$(document).ready(function() {
		
		function openInput($el){
			$el.parent().parent().find('input[type="file"]')[ 0 ].click();
		}
		 
		$(document).on("click",'.uploader',function() {
			 	openInput($(this));
			    return false;
		 });

		$(document).on("change",'input[type="file"]',function() {
			if (this.files &&  this.files[0]) {
	            var reader = new FileReader();
	            el= $(this);
	            reader.onload = function (e) {
	            	$('#img-preview').attr('src', e.target.result).show();
	            }
	            reader.readAsDataURL(this.files[0]);
	        }
		});
		
		 ///// TAGS /////
		
		var liste = new Array();
		{% for tag in tagsList %}
			liste.push("{{tag}}");
		{% endfor %}
		var $tagContainer = $('.tags');
		
		function add_tag(){
			index = $tagContainer.children().length;
			prototype='<div class="image-collection-entry">';
			prototype+='<a class="badge remove-button">';
			prototype+='<span class="glyphicon glyphicon-remove"></span></a>';
			prototype+='<span class="clear">&nbsp;</span>';
			widget=$tagContainer.attr('data-prototype').replace(/__name__/g, index);
			prototype+=widget;
			$tagContainer.append($(prototype));
			
			//Autocompletion
			$('.tags input').each(function(){
				$(this).autocomplete({
			    	source : liste
				});
			});
		}
		$('#add_tag').click(function(){
			add_tag();
			return false;
		});
		$('.tags input').each(function(){
				$(this).autocomplete({
			    	source : liste
				});
		});
		$(document).on("click",'.remove-button',function() {
		      $(this).parent().remove(); 
		      $(this).remove();
		      return false;
		 });
	});

</script>
<div class="picture-edit">
	{{ form_start(form) }}
		{{ form_errors(form) }}
		{{ form_row(form.name) }}
		{{ form_row(form.description) }}
		{{ form_row(form.enableComments) }}
	     
		<div class="picture-upload image-collection-entry col-lg-12">
			{{ form_row(form.file) }}
			<center>
				<button  type="button" class="btn btn-info uploader">Upload new File</button>
			</center>
		</div>
		<br class="clear"/>
		<br class="clear"/>

 		<a href="#" id="add_tag" class="btn btn-info">Add a tag</a>
	    <div class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e }}">

       {% for tag in form.tags %}
	        	<div class="image-collection-entry">
		        	<a class="badge remove-button">
						<span class="glyphicon glyphicon-remove"></span>
					</a>
					<span class="clear"/>
		            {{ form_widget(tag) }}
		    	</div>
	        {% endfor %}
	    </div>
	  <br class="clear"/>
		<br class="clear"/>
		<input type="submit" class="btn btn-success" />
		<a class="confirmModal" href="javascript:history.go(-1);" >
			<button type="button" class="btn btn-danger">Cancel</button>
		</a>
	{{ form_end(form) }}
</div>
{% endblock %}
