{% extends "layout.html" %}

{% block title %}
Photos - 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="Contact Us 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">Photos</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">Photos</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="gallery-section">
  <div class="container my-5">
    <div class="row g-4">
      
      {% for item in gallery_items %}
      <div class="col-lg-3 col-md-4 col-sm-6">
        <a href="{{ url_for('static', filename='images/gallery/' + item.image) }}"
          data-caption="{{ item.caption }}"
          data-thumb="{{ url_for('static', filename='images/gallery/' + item.image) }}"
          data-idx="{{ loop.index }}"
          data-bs-toggle="modal" data-bs-target="#imageLightbox" class="d-block">
          <img src="{{ url_for('static', filename='images/gallery/' + item.image) }}" alt="{{ item.caption }}"
            class="img-fluid rounded gallery-img">
        </a>
      </div>
      {% else %}
      <div class="col-12 text-center">
        <p class="lead">No photos have been uploaded to the gallery yet. Please check back later!</p>
      </div>
      {% endfor %}
      </div>
  </div>
</section>

<div class="modal fade gallery-modal" id="imageLightbox" tabindex="-1" aria-labelledby="lightboxLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <div class="modal-header border-0 pb-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0 d-flex flex-column align-items-center">
        <img src="" class="w-auto" id="lightboxImage" alt="Enlarged image">
        <div id="lightboxCaption" class="lightbox-caption"></div>
        <div id="thumbnailCarousel" class="thumbnail-carousel w-100 px-3">
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev lightbox-nav-btn prev" type="button" data-bs-target="#imageLightbox"
    data-bs-slide="prev" id="prevBtn">
    <span class="fas fa-chevron-left" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next lightbox-nav-btn next" type="button" data-bs-target="#imageLightbox"
    data-bs-slide="next" id="nextBtn">
    <span class="fas fa-chevron-right" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
{% endblock %}