{% extends "base" %}
{% block container %}
    <div class="py-5 my-5">
        <p class="text-center font-weight-bold display-2">Is it dead yet?</p><hr>
        <p class="text-center display-2" id="yesno">{% if dead %}yes{% else %}no{% endif %}</p>
    </div>
    <div class="fixed-bottom p-2">
        <div class="text-center">
            <p>
                Next dead in <span id='countdown'>{{ next_s }}s</span> at <span id='timestamp'>{{ next_time }}</span>.
            </p>
        </div>
        <ul class="list-inline text-center">
            <li class="list-inline-item"><b>Other links</b></li>
            <li class="list-inline-item"><a href="/dead_dec/1010">/dead_dec/num</a></li>
            <li class="list-inline-item"><a href="/dead_hex/DEADEAD">/dead_hex/num</a></li>
            <li class="list-inline-item"><a href="/check/ABABBA/ABBA">/check/num/pattern</a></li>
            <li class="list-inline-item"><a href="https://github.com/mtib/deadyet">github</a></li>
        </ul>
    </div>
    <script>
        const cd = document.getElementById('countdown');
        const ts = document.getElementById('timestamp');
        const bool = document.getElementById('yesno');

        const next_dead_unix = {{ next_time }};
        const next_dead = new Date({{ next_time }} * 1000);

        ts.innerHTML = `${next_dead_unix} = ${next_dead_unix.toString(16).toUpperCase()} = ${next_dead}`;

        window.setInterval(()=>{
            const diff_s = Math.ceil((next_dead - new Date())/1000);
            cd.innerHTML = `${diff_s}s = ${(diff_s/60).toFixed(0)}min = ${(diff_s/60/60).toFixed(1)}h`;
            if (diff_s < 2) {
                bool.innerHTML = 'yes';
            }
            if (diff_s < -10) {
                location.reload();
            }
        }, 1000)
    </script>
{% endblock %}