{% extends "farmer/layout_farmer.html" %}
{% load i18n %}

{% block title %}{% trans "Detalle del Cultivo" %}{% endblock title %}

{% block head %}

<style>
  .video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Mantiene proporción 16:9 */
    margin-bottom: 1rem;
  }

  .video-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid contenido-principal">
                <div class="row">

<div class="container mt-4">
  <div class="row">
    <!-- Libros -->
    <div class="col-md-6">
      <h4>📚 Libros</h4>
      <ul class="list-group">
        {% for book in books %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
          {{ book.title }} <span class="text-muted small">{{ book.description }}</span>
          <a href="{{ book.file.url }}" class="btn btn-sm btn-success" download>Descargar</a>
        </li>
        {% empty %}
        <li class="list-group-item">No hay libros disponibles.</li>
        {% endfor %}
      </ul>
    </div>

    <!-- Videos -->
    <div class="col-md-6">
      <h4>🎥 Videos</h4>

      {% if videos %}
      <!-- Reproductor principal -->
      <div class="video-wrapper">
        <iframe id="mainVideo"
          src="https://www.youtube.com/embed/{{ videos.0.youtube_url|cut:'https://www.youtube.com/watch?v=' }}"
          allowfullscreen></iframe>
      </div>

      <!-- Lista de videos -->
      <ul class="list-group" id="videoList">
        {% for video in videos %}
        <li class="list-group-item video-item"
            data-video-id="{{ video.youtube_url|cut:'https://www.youtube.com/watch?v=' }}">
          <strong>{{ video.title }}</strong><br>
          <span class="text-muted small">{{ video.description }}</span>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p>No hay videos disponibles.</p>
      {% endif %}
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.video-item').forEach(item => {
    item.addEventListener('click', () => {
      const videoId = item.getAttribute('data-video-id');
      document.getElementById('mainVideo').src = `https://www.youtube.com/embed/${videoId}`;
    });
  });
</script>

                    <script>
                      // Cambiar video al hacer clic
                      document.querySelectorAll('.video-item').forEach(item => {
                        item.addEventListener('click', () => {
                          const videoId = item.getAttribute('data-video-id');
                          document.getElementById('mainVideo').src = `https://www.youtube.com/embed/${videoId}`;
                        });
                      });
                    </script>




                </div>
            </div>
        </div>
    </div>            
{% endblock content %}

{% block footer %}

{% endblock %}