{% extends "layout.html" %}

{% block title %}
Videos - Eco Wildlife Tour | Ethical Safaris & Adventures in India
{% endblock %}

{% block content %}
<section class="breadcrumb-section">
  <div class="breadcrumb-image-container">
    <img src="{{ url_for('static', filename='images/backgrounds/tour-manager.jpg') }}" alt="Videos Banner"
      class="w-100 breadcrumb-img">
    <div class="breadcrumb-overlay">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h2 class="text-white fw-bold mt-3">Videos</h2>
            <nav aria-label="breadcrumb" class="m-4">
              <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="/" class="text-white-50">Home</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Videos</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="video-gallery-section py-5 bg-light">
  <div class="container">
    <div class="row">

      <!-- =================================================== -->
      <!-- DYNAMIC VIDEO LOOP STARTS HERE -->
      <!-- This block replaces all your repeated HTML -->
      <!-- =================================================== -->
      {% for video in videos %}
      <div class="col-lg-4 col-md-6 mb-4">
        
        {# This line extracts the YouTube Video ID from the embed URL #}
        {% set video_id = video.embed_url.split('/')[-1] %}

        <a href="#" class="video-card-link" data-bs-toggle="modal" data-bs-target="#videoModal"
          data-bs-src="{{ video.embed_url }}">
          <div class="video-card">
            <div class="video-thumbnail-container">
              <!-- Dynamically generate the thumbnail URL from the video_id -->
              <img src="https://img.youtube.com/vi/{{ video_id }}/hqdefault.jpg" alt="{{ video.title }}" class="img-fluid">
              <div class="play-icon">
                <i class="fas fa-play"></i>
              </div>
            </div>
            <div class="video-card-body text-center">
              <!-- Use the dynamic video title from the database -->
              <h5 class="video-title">{{ video.title }}</h5>
            </div>
          </div>
        </a>
      </div>
      {% else %}
      <!-- This message appears if the 'videos' list from your database is empty -->
      <div class="col-12 text-center">
        <p class="lead">No videos are available at the moment. Please check back later!</p>
      </div>
      {% endfor %}
      <!-- LOOP ENDS HERE -->

    </div>
  </div>
</section>

<!-- VIDEO MODAL - This part does not need to be changed -->
<div class="modal fade video-modal" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-body p-0">
        <div class="ratio ratio-16x9">
          <iframe id="videoIframe" src="" title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}