{% extends 'template.html' %}

{% block css %}
{% endblock css %}

{% block navbar %}
{% include 'z_comps/navbar.html' %}
{% endblock navbar %}

{% block body %}


<h1>{{data[5]}}</h1> 
<h5>
  <i class="bi bi-person-circle"></i> {{data[0]}} {{data[1]}} | 
  <i class="bi bi-pencil-square"></i> {{data[2]}} | 
  {% if data[3] is not none %}
  <i class="bi bi-arrow-repeat"></i> {{data[3]}} | 
  {% endif %}
  <i class="bi bi-clock-history"></i> {{ data[4] }} Minutos
</h5>

<div style="width: 60vw;">
  {{data[6] | safe}}  
</div>

<!-- inicio pruebas scroll to up -->
<style>
  #btn-subir {
    position: fixed;
    bottom: 10%;
    right: 5%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #333;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s;
    z-index: 1000;
}

#btn-subir:hover {
    background: #555;
}

.oculto {
    opacity: 0;
    pointer-events: none;
}
 </style>

<button id="btn-subir" class="oculto">↑</button>
<script>
  const btnSubir = document.getElementById('btn-subir');

  // Mostrar u ocultar el botón según el scroll
  window.addEventListener('scroll', () => {
      if (window.scrollY > 300) { // Mostrar después de 300px de scroll
          btnSubir.classList.remove('oculto');
      } else {
          btnSubir.classList.add('oculto');
      }
  });

  // Función para subir al inicio
  btnSubir.addEventListener('click', () => {
      window.scrollTo({
          top: 0,
          behavior: 'smooth' // Desplazamiento suave
      });
  });
</script>
<!-- fin pruebas -->

{% endblock body %}
{% block js %}
{% endblock js %}