{% extends "base.html" %}

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

{% block content %}
<div id="passes">
    <p class="f3">Passes for {{ location.dlat }}, {{ location.dlng }}</p>
    <p class="f4">Times localized for <span class="light-gray">[[ tz.name ]]</span> (UTC[[ tz.offset ]])</p>
    <div>
        <input type="checkbox" id="degrees" v-model="display.degrees">
        <label for="degrees">Azimuth Degrees</label>
        <input type="checkbox" id="hour12" v-model="display.hour12">
        <label for="hour12">24-hour Times</label>
    </div>
    <table class="tl pa1 w-100">
        <tr class="pa1 f3">
            <th colspan="1">Total</th>
            <th colspan="2">Rise</th>
            <th colspan="5">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, index) in localizedPredictions" v-bind:class="[ index % 2 == 0 ? 'light-silver' : 'light-gray' ]">
            <td class="f5">[[ pred.length_mins ]]</td>
            <td>[[ pred.date ]]</td>
            <td>[[ pred.rise.time ]]</td>
            <td>
                <span class="f4" v-if="!display.degrees">[[ pred.rise.direction ]]</span>
                <span class="f4" v-if="display.degrees">[[ pred.rise.azimuth ]]<span class="mid-gray">&deg;</span></span>
            </td>
            <td>[[ pred.culminate.time ]]</td>
            <td>
                <span class="f4" v-if="!display.degrees">[[ pred.culminate.direction ]]</span>
                <span class="f4" v-if="display.degrees">[[ pred.culminate.azimuth ]]<span class="mid-gray">&deg;</span></span>
            </td>
            <td class="f4">[[ pred.culminate.degrees ]]<span class="mid-gray">&deg;</span></td>
            <td>[[ pred.culminate.distance ]]</td>
            <td>[[ pred.set.time ]]</td>
            <td>
                <span class="f4" v-if="!display.degrees">[[ pred.set.direction ]]</span>
                <span class="f4" v-if="display.degrees">[[ pred.set.azimuth ]]<span class="mid-gray">&deg;</span></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: {
            predictions: {{ predictions_json|safe }},
            display: {
                hour12: true,
                degrees: true
            },
        },
        computed: {
            tz: function() {
                var offset = new Date().getTimezoneOffset() / -60;
                return {
                    "name": Intl.DateTimeFormat().resolvedOptions().timeZone,
                    "offset": offset >= 0 ? "+" + offset : offset
                }
            },
            localizedPredictions: function() {
                var hour12 = !this.display.hour12;
                var preds = JSON.parse(JSON.stringify(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 %}