{% extends "layout.html" %}
{% block body %}
    <div class="col-md-2" ></div>
    <div class="col-md-8">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            {% for vehicle in current_user.vehicles %}
                <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="my-tab-content" class="tab-content">
            {% for vehicle in current_user.vehicles %}
                {% set vehicleloop = loop %}
                <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                    <h3>{{vehicle.name}}</h3>
                    {% if vehicle.pitstops %}
                        {% for pitstop in vehicle.pitstops|reverse %}
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <table class="table table-striped table-bordered table-condensed">
                                        <tr>
                                            <th>Date</th>
                                            <td id="vehicle_{{vehicleloop.index}}_pitstop_{{loop.index}}_date">{{pitstop.date}}</td>
                                        </tr>
                                        <tr>
                                            <th>Odometer</th>
                                            <td id="vehicle_{{vehicleloop.index}}_pitstop_{{loop.index}}_odo">{{pitstop.odometer}} km</td>
                                        </tr>
                                        <tr>
                                            <th>{{ pitstop.consumable.name }}</th>
                                            <td id="vehicle_{{vehicleloop.index}}_pitstop_{{loop.index}}_anmount">{{pitstop.amount}} {{ pitstop.consumable.unit }}</td>
                                        </tr>
                                        <tr>
                                            <th>Costs</th>
                                            <td id="vehicle_{{vehicleloop.index}}_pitstop_{{loop.index}}_cost">
                                                {% if pitstop.costs %}
                                                    {{pitstop.costs}} €
                                                {% else %}
                                                    -- €
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </table>
                                    {% if loop.first %}
                                        <a id="vehicle_{{vehicleloop.index}}_edit_pitstop_{{loop.index}}" href="{{ url_for('edit_pit_stop_form', pid=pitstop.id) }}" class="btn btn-primary">
                                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
                                        </a>
                                        <a id="vehicle_{{vehicleloop.index}}_delete_pitstop_{{loop.index}}" href="{{ url_for('delete_pit_stop_form', pid=pitstop.id) }}" class="btn btn-primary btn-warning ">
                                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="alert alert-warning" role="alert">
                            not enough data: <a href="{{ url_for('select_consumable_for_new_pitstop', vid=vehicle.id) }}">log a pitstop</a>?
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="col-md-2" ></div>


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

    </script>
{% endblock %}