{% 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">

{% endblock %}

{% block body %}
<div class="container">
	<br/>
	{% 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 src="/static/photos/{{ town.photos[0].filename }}" class="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 src="/static/photos/{{town.photos[i].filename }}" class="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 src="/static/photos/{{town.photos[i].filename }}" class="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>
</div>
{% endblock %}