{% extends "layout.html" %}

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

{% block body %}
	<form class='form-horizontal' id='createPitStop' action="{{ url_for('createPitStop') }}" method='post'>

		<!-- Text input-->
		<div class="form-group {% if data.error['date'] %}has-error{% endif %}">
			<label class="col-sm-2 control-label" for="date">Date of Pitstop</label>
    		<div class="col-sm-10">
				<input class="form-control" id="date" name="date" placeholder="" required="" type="date" value='{{ data.last.date }}' />
				<p class='error'>{{ data.error['date'] }}</p>
			</div>
		</div>

		<!-- Text input-->
		<div class="form-group {% if data.error['odometer'] %}has-error{% endif %}">
			<label class="col-sm-2 control-label" for="odometer">Odometer (km)</label>
    		<div class="col-sm-10">
				<input class="form-control" id="odometer" name="odometer" placeholder="" type="number" value='{{ data.last.odometer }}' />
				<p class='error'>{{ data.error['odometer'] }}</p>
			</div>
		</div>

		<!-- Text input-->
		<div class="form-group {% if data.error['litres'] %}has-error{% endif %}">
		  	<label class="col-sm-2 control-label" for="litres">Litres (l)</label>
    		<div class="col-sm-10">
		    	<input class="form-control" id="litres" name="litres" placeholder="" type="number" step='0.1' value='{{ data.last.litres }}' />
				<p class='error'>{{ data.error['litres'] }}</p>
			</div>
		</div>
		
		<!-- Button (Double) -->
		<div class="form-group">
		  	<div class="controls">
		    	<button id="buttonLogId" name="buttonLogId" class="btn btn-success" onclick="document.getElementById('createPitStop').submit();">Log Pitstop</button>
		    	<button id="buttonAbortId" name="buttonAbortId" class="btn btn-warning" onclick="window.location.href='{{ url_for('getPitStops') }}'" type="button" >Abort</button>
			</div>
		</div>
</form>
  
{% endblock %}