{% extends "layout.html" %}

{% macro print_service_header() -%}
	<tr>
		<th>
			Odometer<br />
			(planned<br />
			done)
		</th>
		<th>
			Date<br />
			(done)
		</th>
		<th>
			Tasks
		</th>
	</tr>		
{%- endmacro %}

{% macro print_service(service) -%}
	<tr class='pitstop'>
		<td>
			{{service.odometer_planned}} km<br />
			{% if service.odometer_done %} 
				{{service.odometer_done}}  km 
			{% else %} 
				--  km
			{% endif %}
		</td>
		<td>
			{% if service.date %} 
				{{service.date}}   
			{% else %} 
				--  
			{% endif %}
		</td>
		<td>
			
			{% for task in service.tasks.split(',') %}
				{{task}} <br />
			{% endfor %}
		</td>
	</tr>
{%- endmacro %}

{% block body %}
	{{ service_warning() }}
	<div class="tabbable tabs-left">
		<ul class="nav nav-pills" id="tabs">
			<li>
				<a href="#tab1" data-toggle="tab">Inspektionen</a>
			</li>
			<li>
				<a href="#tab2" data-toggle="tab">Inspektionen (erledigt)</a>
			</li>
		</ul>
		<div class="tab-content">
			<div id="tab1" class="tab-pane active">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-condensed">
						{{ print_service_header() }}
						{% for service in data['services'] | reverse() %}
							{% if not service.odometer_done %}
								{{ print_service(service) }}
							{% endif %}
						{% endfor %}
					</table>
				</div>
			</div>
			<div id="tab2" class="tab-pane">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-condensed">
						{{ print_service_header() }}
						{% for service in data['services'] %}
							{% if service.odometer_done %}
								{{ print_service(service) }}
							{% endif %}
						{% endfor %}
					</table>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
    jQuery(document).ready(function ($) {
    	console.log('ready')
        $('.nav-tabs').tab();
    });
    </script>
	
{% endblock %}