{% extends "layout.html" %}

{% block body %}
    <div id="content">
        <ul id="vehicle_tabs" class="nav nav-tabs" data-tabs="tabs">
            {% for vehicle in data %}
                <li {% if loop.first %}class="active" {%endif %}>
                    <a href="#v{{vehicle.id}}" id="i{{vehicle.id}}" data-toggle="tab">
                        {{ vehicle.name }}
                    </a>
                </li>
            {% endfor %}
        </ul>
        <div id="vehicle_content" class="tab-content ">
            {% for vehicle in data %}
                <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                    <h3>{{vehicle.name}}</h3>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-condensed">
							<tr>
								<th>Number of Pitstops:</th>
								<td>{{ vehicle.pitstop_count }}</td>
							</tr>
							<tr>
								<th>Logged Distance:</th>
								<td>{{ vehicle.overall_distance | round(2) }} km</td>
							</tr>
							<tr>
								<th>Average Distance:</th>
								<td>{{ vehicle.average_distance | round(2) }} km</td>
							</tr>
								<tr>
								<th>Litres fuelled:</th>
								<td>{{ vehicle.overall_litres | round(2) }} l</td>
							</tr>
							<tr>
								<th>Average Litres fuelled:</th>
								<td>{{ vehicle.average_litres_fuelled | round(2) }} l</td>
							</tr>
							<tr>
								<th>Average Litres used:</th>
								<td>{{ vehicle.average_litres_used | round(2) }} l/100km</td>
							</tr>
							<tr>
								<th>Logged Costs:</th>
								<td>{{ vehicle.overall_costs | round(2) }} €</td>
							</tr>
							<tr>
								<th>Average Costs per Litre:</th>
								<td>{{ vehicle.average_costs_per_litre | round(2) }} €/l</td>
							</tr>
						</table>
					</div>
                    <ul id="charts_tabs" class="nav nav-tabs" data-tabs="tabs">
                        <li class="active">
                            <a href="#v{{vehicle.id}}_c3" id="i{{vehicle.id}}_c3" data-toggle="tab">
                                Consumption
                            </a>
                        </li>
                        <li>
                            <a href="#v{{vehicle.id}}_c1" id="i{{vehicle.id}}_c1" data-toggle="tab">
                                Fuelled litres
                            </a>
                        </li>
                        <li>
                            <a href="#v{{vehicle.id}}_c2" id="i{{vehicle.id}}_c2" data-toggle="tab">
                                Odometer
                            </a>
                        </li>
                        <li>
                            <a href="#v{{vehicle.id}}_c4" id="i{{vehicle.id}}_c4" data-toggle="tab">
                                Costs per litre
                            </a>
                        </li>
                        <li>
                            <a href="#v{{vehicle.id}}_c5" id="i{{vehicle.id}}_c5" data-toggle="tab">
                                Costs
                            </a>
                        </li>
                    </ul>
                    <div id="charts_tabs-content" class="tab-content">
                       <div class="tab-pane active" id="v{{vehicle.id}}_c3">
                            {% if vehicle.pitstop_count > 1 %}
    					        <div id="averageUsageDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
                                <script type="text/javascript">
                                    {{ chartScript('averageUsageDiv'+vehicle.id|str, vehicle.average_litres, 'l/100 km') }}
                                </script>
                            {% else %}
                                <div class="alert alert-warning" role="alert">
                                    not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
                                </div>
                            {% endif %}
                        </div>
                        <div class="tab-pane " id="v{{vehicle.id}}_c1">
                            {% if vehicle.pitstop_count > 0 %}
 					            <div id="fuelledChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
                                <script type="text/javascript">
                                    {{ chartScript('fuelledChartDiv'+vehicle.id|str, vehicle.litres, 'l') }}
                                </script>
                            {% else %}
                                <div class="alert alert-warning" role="alert">
                                    not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
                                </div>
                            {% endif %}
                        </div>
                        <div class="tab-pane " id="v{{vehicle.id}}_c2">
                            {% if vehicle.pitstop_count > 0 %}
    					        <div id="odometerChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
                                <script type="text/javascript">
                                    {{ chartScript('odometerChartDiv'+vehicle.id|str, vehicle.odometers, 'km') }}
                                </script>
                            {% else %}
                                <div class="alert alert-warning" role="alert">
                                    not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
                                </div>
                            {% endif %}
                        </div>
                        <div class="tab-pane " id="v{{vehicle.id}}_c4">
                            {% if vehicle.pitstop_count > 0 %}
    					        <div id="costsPerLitre{{vehicle.id}}" style="width:100%; height:500px;"></div>
                                <script type="text/javascript">
                                    {{ chartScript('costsPerLitre'+vehicle.id|str, vehicle.costsPerLitre, '€/l') }}
                                </script>
                            {% else %}
                                <div class="alert alert-warning" role="alert">
                                    not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
                                </div>
                            {% endif %}
                        </div>
                        <div class="tab-pane " id="v{{vehicle.id}}_c5">
                            {% if vehicle.pitstop_count > 0 %}
    					        <div id="costs{{vehicle.id}}" style="width:100%; height:500px;"></div>
                                <script type="text/javascript">
                                    {{ chartScript('costs'+vehicle.id|str, vehicle.costs, '€') }}
                                </script>
                            {% else %}
                                <div class="alert alert-warning" role="alert">
                                    not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>


    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('#vehicle_tabs').tab();
            if(window.location.hash != "") {
                  $('a[href="' + window.location.hash + '"]').click()
            }
          });

    </script>



{% endblock %}