{% extends "layout.html" %}
{% block body %}
    <div id="content">
        <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 %}
                <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                    <h3>{{vehicle.name}}</h3>
                    {% if vehicle.pitstops %}
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-condensed">
                                <tr>
                                    <th>
                                        Date<br/>
                                        Days
                                    </th>
                                    <th>
                                        Odometer<br/>
                                        Distance
                                    </th>
                                    <th>
                                        Litres<br/>
                                        Average
                                    </th>
                                    <th>
                                        Costs<br />
                                        Costs per Litre
                                    </th>
                                </tr>
                                {% for pitstop in vehicle.pitstops|reverse %}
                                    {% if not loop.last %}
                                        {% set days = (pitstop.date - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].date).days %}
                                        {% set distance = pitstop.odometer - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].odometer %}
                                        {% set average = (pitstop.litres / distance) * 100 %}
                                        <tr class='pitstop'>
                                            <td>
                                                {{pitstop.date}}<br/>
                                                {{ days }} days
                                            </td>
                                            <td>
                                                {{pitstop.odometer}} km<br/>
                                                {{distance}} km
                                            </td>
                                            <td>
                                                {{pitstop.litres}} l<br/>
                                                {{average | round(2)}} l/100km
                                            </td>
                                            <td>
                                                {{pitstop.costs}} €<br />
                                                {{ (pitstop.costs / pitstop.litres) | round(2) }} €/l
                                            </td>
                                        </tr>
                                        {% if loop.first %}
                                            <tr class='pitstop'>
                                                <td colspan='4'>
                                                    <a 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 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>
                                                </td>
                                            </tr>
                                        {% endif %}
                                    {% else %}
                                        <tr class='pitstop'>
                                            <td>
                                                {{pitstop.date}}<br/>
                                                -- days
                                            </td>
                                            <td>
                                                {{pitstop.odometer}} km<br/>
                                                -- km
                                            </td>
                                            <td>
                                                {{pitstop.litres}} l<br/>
                                                -- l/100km
                                            </td>
                                            <td>
                                                {{pitstop.costs}} €<br />
                                                {{ (pitstop.costs / pitstop.litres) | round(2) }} €/l
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            </table>
                        </div>
                    {% 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>
            {% endfor %}
        </div>
    </div>


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

    </script>
{% endblock %}