{% extends "layout.html" %}

{% macro pitstop(field, vindex, loop) -%}
<div class="panel panel-default">
    <div class="panel-body">
        <div style="text-align: left; font-size: 20px;">
            <span class="glyphicon glyphicon-filter" aria-hidden="true" style="border: 1px solid black; padding: 5px 5px 3px; border-radius: 5px;"></span>
        </div>
        <table class="table table-striped table-bordered table-condensed">
            <tr>
                <th>Date</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_date">{{field.date}}</td>
            </tr>
            <tr>
                <th>Odometer</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_odo">{{field.odometer}} km</td>
            </tr>
            <tr>
                <th>{{ field.consumable.name }}</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_anmount">{{field.amount}} {{ field.consumable.unit }}</td>
            </tr>
            <tr>
                <th>Costs</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_cost">
                    {% if field.costs %}
                        {{field.costs}} €
                    {% else %}
                        -- €
                    {% endif %}
                </td>
            </tr>
        </table>
        {% if loop.first %}
            <a id="vehicle_{{vindex}}_edit_pitstop_{{loop.index}}" href="{{ url_for('edit_pit_stop_form', pid=field.id) }}" class="btn btn-primary">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
            </a>
        {% endif %}
            <a id="vehicle_{{vindex}}_delete_pitstop_{{loop.index}}" href="{{ url_for('delete_pit_stop_form', pid=field.id) }}" class="btn btn-primary btn-warning ">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
            </a>
    </div>
</div>
{%- endmacro %}

{% macro service(field, vindex, loop) -%}
<div class="panel panel-default">
    <div class="panel-body">
        <div style="text-align: left; font-size: 20px;">
            <span class="glyphicon glyphicon-wrench" aria-hidden="true" style="border: 1px solid black; padding: 5px 5px 3px; border-radius: 5px;"></span>
        </div>
        <table class="table table-striped table-bordered table-condensed">
            <tr>
                <th>Date</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_date">{{field.date}}</td>
            </tr>
            <tr>
                <th>Odometer</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_desc">{{field.odometer}} km</td>
            </tr>
            <tr>
                <th>Description</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_anmount" class="markdown">{{field.description | markdown | safe}}</td>
            </tr>
            <tr>
                <th>Costs</th>
                <td id="vehicle_{{vindex}}_pitstop_{{loop.index}}_cost">
                    {% if field.costs %}
                        {{field.costs}} €
                    {% else %}
                        -- €
                    {% endif %}
                </td>
            </tr>
        </table>
        {% if loop.first %}
            <a id="vehicle_{{vindex}}_edit_pitstop_{{loop.index}}" href="{{ url_for('edit_service_form', sid=field.id) }}" class="btn btn-primary">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
            </a>
        {% endif %}
            <a id="vehicle_{{vindex}}_delete_pitstop_{{loop.index}}" href="{{ url_for('delete_service_form', sid=field.id) }}" class="btn btn-primary btn-warning ">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
            </a>
    </div>
</div>
{%- endmacro %}


{% 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 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 user.vehicles %}
                {% set vehicleloop = loop %}
                <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                    <h3>{{vehicle.name}}</h3>
                    {% if vehicle.data %}
                        {% for data in vehicle.data|reverse %}
                            {% if 'Pitstop' in data.__class__.__name__ %}
                                {{ pitstop(data, vehicleloop.index, loop) }}
                            {% endif %}
                            {% if 'Service' in data.__class__.__name__ %}
                                {{ service(data, vehicleloop.index, loop) }}
                            {% endif %}
                        {% 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 %}