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

{% block title %}Images NASA{% endblock %}

{% block body %}
<style>
body {
  background: url('/images/nasa.webp') no-repeat center center fixed;
  background-size: cover;
}
.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="pt-5 container">
    <div class="mb-5">
        <h1 class="pt-5 text-center tracking-in-contract">Image library</h1>
    </div>
    <div class="text-center col-lg-6 col-md-6 col-sm-12 mx-auto">
        {{ form_start(form) }}
        {{ form_row(form.query) }}
        <p class="exemple-img">Exemple : Galaxy, moon, James Webb, sun, mars ...</p>
        {{ form_row(form.submit, {'attr': {'class': 'btn btn-primary'}}) }}
        {{ form_end(form) }}
    </div>
    <div class="row mt-5">
        {% for item in data.items %}
        <div class="col-lg-6 col-md-6 col-sm-12 mt-5">
            <div class="card w-100 h-100 mx-auto m-3">
                <h5 class="text-center">{{ item.data[0].title }}</h5>
                <p class="text-dark mt-3 description" id="desc-short-{{ loop.index }}">
                    {{ item.data[0].description | slice(0, 150) ~ '...' }}
                </p>
                <p class="text-dark mt-3 description full" id="desc-full-{{ loop.index }}" style="display: none;">
                    {{ item.data[0].description }}
                </p>
                <a class="mb-3" href="#" class="toggle-desc" data-index="{{ loop.index }}" onclick="toggleDescription({{ loop.index }}); return false;">Read more</a>
                <img class="card-img-top" src="{{ item.links[0].href }}" alt="Image de la NASA">
                <p class="text-dark text-center mt-3">{{ item.data[0].date_created | date("d/m/Y") }}</p>
            </div>
        </div>
        {% endfor %}
    </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>
<script>
function toggleDescription(index) {
    var shortDesc = document.getElementById('desc-short-' + index);
    var fullDesc = document.getElementById('desc-full-' + index);
    var toggleLink = document.querySelector('a[data-index="' + index + '"]');

    if (shortDesc.style.display === 'none') {
        shortDesc.style.display = 'block';
        fullDesc.style.display = 'none';
        toggleLink.textContent = 'Read more';
    } else {
        shortDesc.style.display = 'none';
        fullDesc.style.display = 'block';
        toggleLink.textContent = 'Reduce';
    }
}
</script>
{% endblock %}