{% extends "layout.html" %}

{% block navigation %}
	<li><a href='{{ url_for('createPitStopForm') }}'>Create Pitstop</a></li>
	<li><a href='{{ url_for('getStatistics') }}'>Statistics</a></li>
{% endblock %}	

{% block body %}
	<div class="table-responsive">
		<table class="table table-striped table-bordered table-condensed">
			<tr>
				<th>
					Date<br />
					Days
				</th>
				<th>
					Odometer<br />
					Distance
				</th>
				<th>
					Litres<br />
					Average
				</th>
			</tr>		
			{% for pitstop in data['pitstops'] %}
				<tr class='pitstop'>
					<td>
						{{pitstop.date}}<br />
						{% if pitstop.days %}{{pitstop.days}}{% else %} --{% endif %} days
					</td>
					<td>
						{{pitstop.odometer}} km<br />
						{% if pitstop.distance %}{{pitstop.distance}}{% else %} --{% endif %} km
					</td>
					<td>
						{{pitstop.litres}} l<br />
						{% if pitstop.average %}{{pitstop.average}}{% else %} --{% endif %} l/100km
					</td>
				</tr>
			{% endfor %}
		</table>
	</div>
{% endblock %}