{% extends "layout.html" %}

{% block body %}
<div class="col-md-2" ></div>
<div class="col-md-8">
    <div class="panel panel-default">
        <div class="panel-body">
            <h3>Plan Pitstop for '{{ vehicle.name }}'</h3>
            Price comparision for {{ consumable.name }}:
            <div class="table-responsive">
                <table id="compare" class="table table-striped table-bordered table-condensed tablesorter">
                    <thead>
                        <tr>
                            <th>Filling Station</th>
                            <th>Price/{{ consumable.unit }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for offer in offers %}
                            <tr>
                                <td>
                                    <div class="row filling_station_info" style="border: 0px">
                                        <div class="col-md-8">
                                            <div>{{ offer[0].name }}</div>
                                            <div>{{ offer[0].street }} {{ offer[0].houseNumber }}</div>
                                            <div>{{ offer[0].postCode }} {{ offer[0].place }}</div>
                                        </div>
                                        <div class="col-md-4" style="height: 60px;">
                                            <img src="/static/logos/{{ offer[0].brand|lower }}.png">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {{ offer[1] }} €/{{ consumable.unit }}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#compare").tablesorter({sortList: [[1,0]]});
    });
</script>
<div class="col-md-2" ></div>
{% endblock %}