{% extends "bootstrap/base.html" %}
{% block title %}IT'S COMING{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
{% if countdown is defined or final_countdown is defined %}
    <link rel="stylesheet" href="{{url_for('.static', filename='final_clock.css')}}">
    <link rel="stylesheet" href="{{url_for('.static', filename='glitch.css')}}">
{% endif %}
{% endblock %}

{% block content %}
<div class="crt" style="margin: auto; overflow: hidden;">
    <div id="clockdiv" class="wrap">
        <div id='glitch' class="glitch" data-text=""><span class="days"></span><span class="colon">:</span><span class="hours"></span><span class="colon">:</span><span class="minutes"></span><span class="colon">:</span><span class="seconds"></span></div> 
    </div>
</div>
<br>
{% endblock %}

{% block scripts %}
{{ super () }}
{% if final_countdown is defined %}
    <script>
        const deadline = '{{ final_countdown['timestamp'] }}';
        const tripName = '{{ final_countdown['name'] }}';
    </script>
    <script src="{{url_for('.static', filename='final_clock.js')}}"></script>
{% endif %}
{% endblock %}