{% extends 'base.html.twig' %}

{% block body %}
<style>
.tracking-in-contract {
	-webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}

</style>
<section class="astro-bg">
    <img src="images/Asteroide.jpg" alt="Image de fond" />
</section>
<div class="asteroide">
    {% set currentDate = date()|date('Y-m-d', "Europe/Paris") %}
    {% set neoData = data.near_earth_objects[currentDate] %}
    <div class="text-center">
        <h2 class="tracking-in-contract">Asteroids of : {{ currentDate }}</h2>
        <p class="asteroide-empty">Potentially dangerous asteroids</p>
        <p class="text-white h5">Total asteroids passing today: {{ neoData|length }}</p>
    </div>
    {% if neoData is empty %}
        <p class="asteroide-empty">No asteroids were found for today.</p>
        {% else %}
        <div class="container-fluid mt-3">
            <div class="row">
            {% for neo in neoData %}      
                <div class="card mx-auto mt-4 mb-5 text-center">
                    <h3>{{ neo.name }}</h3>
                    <p>Diamètre estimé (km) : {{ neo.estimated_diameter.kilometers.estimated_diameter_min }} - {{ neo.estimated_diameter.kilometers.estimated_diameter_max }}</p>
                    <p>Est un astéroïde potentiellement dangereux : Oui</p>
                    {% for approach in neo.close_approach_data %}
                    <p>Passage prévu : {{ approach.close_approach_date }}</p>
                    <p>Vitesse relative (km/s) : {{ approach.relative_velocity.kilometers_per_second }}</p>
                    <p>Distance (km) : {{ approach.miss_distance.kilometers }}</p>
                    {% endfor %}
                    <p>Est l'objet Sentry : {{ neo.is_sentry_object ? 'Oui' : 'Non' }}</p>
                </div>
            {% endfor %}
        </div>
    {% endif %}
  </div>
</div>
<div>
  <a href="#" id="back-to-top" class="btn rounded-pill  back-to-top" role="button"><i class="bi bi-arrow-up"></i></a>
</div>
<script>
  // Détecter le défilement de la page
  window.onscroll = function() {scrollFunction()};

  function scrollFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
      // Afficher le bouton
      document.getElementById("back-to-top").style.display = "block";
    } else {
      // Masquer le bouton
      document.getElementById("back-to-top").style.display = "none";
    }
  }

  // Remonter en haut de la page lorsque le bouton est cliqué
  document.getElementById("back-to-top").onclick = function() {
    document.body.scrollTop = 0; // Pour Safari
    document.documentElement.scrollTop = 0; // Pour Chrome, Firefox, IE et Opera
  };
</script>
{% endblock %}