{% extends "base_template.html" %}

{% block head %}
	<!-- Latest compiled and minified CSS -->
	<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->

	<!-- Optional theme -->
	<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> -->

	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

	<!-- my css -->
	<link rel="stylesheet" type="text/css" href="/static/highlights.css">
	<script src="/static/js/lazy.js"></script>

{% endblock %}

{% block body %}
<div class="container">
	<h1>See only the <em>Highest Quality</em> Content</h1>

	<br />

	<!-- work around a lazy load bug,,,im not a fe dev!!! -->
	<img src="/static/photos/highlights/{{first_img}}">

	{% for image in imgs %}
		<img class="lazy" data-src="/static/photos/highlights/{{image}}">
	{% endfor %}
</div>
{% endblock %}