{% extends "base_public.html" %}
{% load static %}

{% block content %}
<h3 class="mb-4">Photo Gallery</h3>

<div class="row g-3">
  {% for g in gallery %}
  <div class="col-md-3">
    <div class="gallery-item" 
         data-bs-toggle="modal" 
         data-bs-target="#lightboxModal"
         data-title="{{ g.title }}"
         data-img="{{ g.image.url }}"
         data-desc="{{ g.description }}">
      <img src="{{ g.image.url }}" class="img-fluid rounded shadow-sm">
    </div>
  </div>
  {% endfor %}
</div>

<!-- LIGHTBOX MODAL -->
<div class="modal fade" id="lightboxModal">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body text-center">
        <h5 id="lb-title"></h5>
        <img id="lb-img" class="img-fluid rounded mb-2">
        <p id="lb-desc" class="text-muted"></p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.querySelectorAll(".gallery-item").forEach(item => {
  item.onclick = () => {
    document.getElementById("lb-title").innerText = item.dataset.title
    document.getElementById("lb-img").src = item.dataset.img
    document.getElementById("lb-desc").innerText = item.dataset.desc
  }
})
</script>
{% endblock %}