{% 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/stops.css">

	<!-- lazy loading js -->
	<script src="/static/js/lazy.js"></script>

{% endblock %}

{% block body %}
<div class="container">
	<h1>Across the Country</h1>
	<h1>in 90 Days:</h1>
	<h2>A Travelogue of the Quixotic Trip I took on my Bicycle from Seattle to New York</h2>

	{% if args.is_historical_period %}
		{% include 'introduction.html' %}
	{% else %}
		<p> >> YOU ARE VIEWING A <em>REAL TIME</em> HISTORIC REPLAY OF THIS 2018 TRIP << </p>
		<p> <pre>      Today is: {{ args.todays_date }} </pre></p>
	{% endif %}

	<br/>

	{% for town in args.towns %}
		{% if town.visits %}
		<a name="{{town.id}}">
			<p class="day-links">Day {{town.day}} thru Day {{town.day + town.visits}} -- {{town.date_}} until {{town.final_date}}</p>
		</a>
		{% else %}
		<a name="{{town.id}}">
			<p class="day-links">Day {{town.day}} -- {{town.date_}}</p>
		</a>
		{% endif %}
		<div class="town">
		{% if town.visits %}
			<h1>{{town.city}}. x{{town.visits + 1}}</h1>
		{% else %}
			<h1>{{town.city}}.</h1>
		{% endif %}

		{% if town.photos %}
			{% if town.photos|length == 1 %}
				<img data-src="/static/photos/{{ town.photos[0].filename }}" class="lazy townphoto solophoto">
			{% else %}
				<div id="{{town.id}}-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						{% for i in range(town.photos|length) %}
							{% if i == 0 %}
								<li data-target="#{{town.id}}-carousel" data-slide-to="{{i}}" class="active"></li>
							{% else %}
								<li data-target="#{{town.id}}-carousel" data-slide-to="{{i}}"></li>
							{% endif %}
						{% endfor %}
					</ol>
					<div class="carousel-inner">
					{% for i in range(town.photos|length) %}
						{% if i == 0 %}
							<div class="item active">
								<img data-src="/static/photos/{{
								town.photos[i].filename }}" class="lazy townphoto">
								{% if town.photos[i].comments %}
									<div class="carousel-caption d-none d-md-block">
										<p>{{ town.photos[i].comments }}</p>
									</div>
								{% endif %}
							</div>
						{% else %}
							<div class="item">
								<img data-src="/static/photos/{{
								town.photos[i].filename }}" class="lazy townphoto" >
								{% if town.photos[i].comments %}
									<div class="carousel-caption d-none d-md-block">
										<p>{{ town.photos[i].comments }}</p>
									</div>
								{% endif %}
							</div>
						{% endif %}
					{% endfor %}
					</div>

					<a class="left carousel-control" href="#{{town.id}}-carousel" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#{{town.id}}-carousel" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			{% endif %}
		{% endif %}

		{% set city_html = 'stops/' + town.id + '.html' %}
		{% include city_html ignore missing %}
		</div>
	{% endfor %}
</div>
 {% endblock %}