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

{% block title %}Video NASA{% endblock %}

{% block body %}
<style>
    body {
        background: url('/images/nasa.webp') no-repeat center center fixed;
        background-size: cover;
    }
    .text-overlay {
        background: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
        color: white; /* Couleur du texte */
        padding: 10px; /* Espacement autour du texte */
        border-radius: 25px; /* Coins arrondis */
        display: inline-block; /* Pour que le fond ne couvre que le texte */
        font-size: 1.2rem; /* Taille de la police */
    }
    .section-video {
        padding-top: 7rem;
    }
    .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;
        }
    }

    .iframe {
        height: 320px;
    }
    @media (max-width: 1300px) {
        .iframe {
            height: 320px;
        }
    }

    @media (max-width: 768px) {
        .iframe {   
            height: 225px;
        }
    }   
    .style-seven {
        margin-top: 25px;
        overflow: visible; /* For IE */
        height: 30px;
        border-style: solid;
        border-color: black;
        border-width: 1px 0 0 0;
        border-radius: 20px;
    }
    .style-seven:before { /* Not really supposed to work, but does */
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: black;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }
</style>
<section class="container section-video">
    <div class="pt-lg-5">
        <div class="text-center">
            <h1 class="text-center mt-5 mt-sm-0 tracking-in-contract">The latest videos from NASA</h1>
        </div>
        <hr class="style-seven">
        <div class="row">
            {% for video in videos %}
                <div class="col-lg-6 col-md-6 col-sm-12 text-center mt-5 mb-3">
                    <iframe class="iframe w-100" src="https://www.youtube.com/embed/{{ video.id }}" frameborder="0" allowfullscreen></iframe>
                    <h4 class="text-white text-overlay">{{ video.title }}</h4>
                </div>    
            {% endfor %}
        </div>
    </div>
</section>
<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 %}