add page to plan a pitstop

app/templates/planPitStopForm.html

@@ -0,0 +1,50 @@
+{% 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 %}