{% extends "./base.twig" %}
{% block title %}Le site va ouvrir prochainement{% endblock %}
{% block head %}
  <link rel="stylesheet" href="/styles/countdown.css" />
{% endblock %}
{% block content %}
  <div class="countdown" id="countdown">
    <div class="countdown-title-container">
      <h2 class="countdown-title">Soyez patient...</h2>
      <h5 class="countdown-subtitle">Le site ouvre le 4 septembre à midi, c'est à dire dans :</h5>
    </div>
    <div id="counter" class="counter">
      <div class="counter-component days">
        <span id="days"></span>
        <div class="label">Jours</div>
      </div>
      <span class="separator">:</span>
      <div class="counter-component hours">
        <span id="hours"></span>
        <div class="label">Heures</div>
      </div>
      <span class="separator">:</span>
      <div class="counter-component minutes">
        <span id="minutes"></span>
        <div class="label">Minutes</div>
      </div>
      <span class="separator">:</span>
      <div class="counter-component seconds">
        <span id="seconds"></span>
        <div class="label">Secondes</div>
      </div>
    </div>
  </div>
{% endblock %}
{% block scripts %}
<script>
let openDate = new Date(`{{ openDate }}`)
</script>
<script src="/scripts/countdown.js"></script>
{% endblock %}