{% extends "layout.jinja2" %}

{% block content %}
	<p>
		<button class="btn btn-success" type="button" data-toggle="modal" data-target="#confirmAdd">
			<span class="glyphicon glyphicon-plus"></span> Nouvelle image</button>

	</p>
	<br />
	<div class="pictures">
		{% for item in images_list %}
		<div class="item">
			<div class="item_description"><span>{{ item[1] }}</span></div>
			<a href="{{ request.route_url('image_edit', filename=item[1]) }}">
				<img src="{{ item[0] }}" alt="" />
			</a>
		</div>
		{% endfor %}
	</div>

	<!-- Modal : Confirmation AJOUT  -->
	<div id="confirmAdd" class="modal" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Ajouter une image</h4>
				</div>
				<div class="modal-body">
					<form id="upload_doc-form" action="{{ request.route_url('images') }}" method="post" 
					accept-charset="utf-8" enctype="multipart/form-data">
						<div class="form-group">
							<label for="uploadfile">Veuillez séléctionner un fichier :</label>
							<input class="file" id="uploadfile" name="uploadfile" type="file"  multiple />
						</div>
						<br />
						<div class="form-group">
							<button id="uploadButton" class="btn btn-success" type="submit" name="form.submitted">
								<i class="glyphicon glyphicon-arrow-up"></i> Télécharger</button>
						</div>
					</form>  
				</div>
				<div class="panel-footer">
					<ul>
						<li>Seuls les documents au format <b>PNG ou JPG</b> seront acceptés.</li>
						<li>La taille de chaque document ne doit <b>pas dépasser 4 Mo</b>.</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<script src="{{ request.static_url('cao_blogr:static/js/jquery-tjgallery.min.js')}}"></script>
	<script>
		// waiting for loading page
		$(window).on('load', function(){
			$('.pictures').tjGallery({
				selector: '.item',
				margin: 10
			});
			$('.pictures').tjGallery({
				row_min_height: 180
			});
		})
	</script>

{% endblock %}