{% extends "layout.html" %}

{% block navigation %}
	<li><a href='{{ url_for('getPitStops') }}'>Home</a></li>
	<li><a href='{{ url_for('createPitStopForm') }}' class="active">Create Pitstop</a></li>
{% endblock %}	

{% block body %}
	{% if data.error %}
	<div>
		<p class='error'><strong>Error:</strong> {{ data.error }}</p>
	</div>
	{% endif %}
	<form class="form-horizontal" id='createPitStop' action="{{ url_for('createPitStop') }}" method='post'>
		<fieldset>

		<!-- Form Name -->
		<legend>Create Pitstop</legend>

		<!-- Text input-->
		<div class="control-group">
			<label class="control-label" for="date">Date of Pitstop</label>
			<div class="controls">
				<input id="date" name="date" placeholder="" class="input-large" required="" type="date" value='{{ data.last.date }}' />
	    	</div>
		</div>

		<!-- Text input-->
		<div class="control-group">
			<label class="control-label" for="odometer">Odometer</label>
			<div class="controls">
				<input id="odometer" name="odometer" placeholder="" class="input-large" required="" type="text" value='{{ data.last.odometer }}' />
			</div>
		</div>

		<!-- Text input-->
		<div class="control-group">
		  	<label class="control-label" for="litres">Litres</label>
		  	<div class="controls">
		    	<input id="litres" name="litres" placeholder="" class="input-large" required="" type="text"  value='{{ data.last.litres }}' />
			</div>
		</div>
		
		<!-- Button (Double) -->
		<div class="control-group">
		  	<label class="control-label" for="buttonLogId"></label>
		  	<div class="controls">
		    	<button id="buttonLogId" name="buttonLogId" class="btn btn-success" onclick="document.getElementById('createPitStop').submit();">Log Pitstop</button>
		    	<button id="buttonAbortId" type="button" name="buttonAbortId" class="btn btn-warning" onclick="window.location.href='{{ url_for('getPitStops') }}'">Abort</button>
			</div>
		</div>
		
	</fieldset>
</form>
  
{% endblock %}