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