{% 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>Date</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 localizedPredictions">
            <td class="f5">[[ pred.length_mins ]]</td>
            <td>[[ pred.date ]]</td>
            <td>[[ pred.rise.time ]]</td>
            <td>
                <span class="f4">[[ pred.rise.direction ]]</span>
                <span class="f6 mid-gray">[[ pred.rise.azimuth ]]</span>
            </td>
            <td>[[ pred.culminate.time ]]</td>
            <td>
                <span class="f4">[[ pred.culminate.direction ]]</span>
                <span class="f6 mid-gray">[[ pred.culminate.azimuth ]]</span>
            </td>
            <td class="f4">[[ pred.culminate.degrees ]]</td>
            <td>[[ pred.culminate.distance ]]</td>
            <td>[[ pred.set.time ]]</td>
            <td>
                <span class="f4">[[ pred.set.direction ]]</span>
                <span class="f6 mid-gray">[[ pred.set.azimuth ]]</span>
            </td>
        </tr>
    </table>
</div>

<script>
    var groupBy = function(xs, key) {
        return xs.reduce(function(rv, x) {
            (rv[x[key]] = rv[x[key]] || []).push(x);
            return rv;
        }, {});
    };

    var passes = new Vue({
        el: "#passes",
        delimiters: ["[[","]]"],
        data: {
            text: "hello",
            predictions: {{ predictions_json|safe }},
            hour12: false
        },
        computed: {
            localizedPredictions: function() {
                var hour12 = this.hour12;
                var preds = this.predictions.map(function(p) {
                    p.date = new Date(p.rise.time).toLocaleDateString();
                    p.rise.time = new Date(p.rise.time).toLocaleTimeString([], { hour12 });
                    p.culminate.time = new Date(p.culminate.time).toLocaleTimeString([], { hour12 });
                    p.set.time = new Date(p.set.time).toLocaleTimeString([], { hour12 });
                    return p;
                });

                return preds;
            }
        }
    });
</script>
{% endblock %}