<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>Image Search</title>
		<meta name="description" content="image search engine" />
		<meta name="keywords" content="image search" />
		<link rel="stylesheet" type="text/css" href="../static/css/default.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/component.css" />
		<script src="../static/js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
                        <header>
				<h1>Image Search<span> results </span></h1>	
			</header>
			<ul class="grid effect-6" id="grid">
                            {% for fl in result_paths %}
				<li><img src="{{ url_for('get_image', filename=fl) }}"></li>
                            {% endfor %}
			</ul>
		</div>
		<script src="../static/js/masonry.pkgd.min.js"></script>
		<script src="../static/js/imagesloaded.js"></script>
		<script src="../static/js/classie.js"></script>
		<script src="../static/js/AnimOnScroll.js"></script>
		<script>
			new AnimOnScroll( document.getElementById( 'grid' ), {
				minDuration : 0.4,
				maxDuration : 0.7,
				viewportFactor : 0.2
			} );
		</script>
	</body>
</html>
