{% extends "base.html" %}

{% block extrahead %}
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/core.js"></script>
{% endblock %}

{% block content %}
<div id="passes">
    <p class="f3">Passes for {{ location.lat }}, {{ location.lng }}</p>
    <table class="tl pa1 w-100">
        <tr class=" tc pa1 f3">
            <th colspan="1">Total</th>
            <th colspan="2">Rise</th>
            <th colspan="4">Culminate</th>
            <th colspan="2">Set</th>
        </tr>
        <tr class="pa1 f4">
            <th>Length</th>
            <th>Time</th>
            <th>Azimuth</th>
            <th>Time</th>
            <th>Azimuth</th>
            <th>Elevation</th>
            <th>Distance</th>
            <th>Time</th>
            <th>Azimuth</th>
        </tr>
        <tr class="pa1" v-for="pred in predictions">
            <td>[[ pred.length ]]</td>
            <td>[[ pred.rise.time ]]</td>
            <td>[[ pred.rise.azimuth ]] ([[ pred.rise.direction ]])</td>
            <td>[[ pred.culminate.time ]]</td>
            <td>[[ pred.culminate.azimuth ]] ([[ pred.culminate.direction ]])</td>
            <td>[[ pred.culminate.degrees ]]</td>
            <td>[[ pred.culminate.distance ]]</td>
            <td>[[ pred.set.time ]]</td>
            <td>[[ pred.set.azimuth ]] ([[ pred.set.direction ]]) </td>
        </tr>
    </table>
</div>

<script>
    var passes = new Vue({
        el: "#passes",
        delimiters: ["[[","]]"],
        data: {
            text: "hello",
            predictions: {{ predictions_json|safe }}
        }
    });
</script>
{% endblock %}