{% extends 'core/base.html' %}

{% block content %}
  <div class="card mb-4">
    <div class="card-body">
      <h2 class="card-title">{{ plant.common_name.name }}</h2>
      <h5 class="card-subtitle mb-3 text-muted">
        {{ plant.scientific_name.name }}
      </h5>

      {# ── DESKTOP / TABLET GALLERY ──────────────────────────── #}
      <div class="d-none d-md-block">
        {# hero image #}
        {% set hero = featured or plant.media_items|first %}
        {% if hero %}
          <div class="text-center mb-4">
            <img
              id="main-image"
              src="{{ generate_image_url(hero) }}"
              class="img-fluid"
              style="max-height:60vh; object-fit:contain;"
              alt="Image for {{ plant.common_name.name }}"
            >
          </div>
        {% endif %}
        {# thumbnails #}
        <div class="d-flex flex-wrap justify-content-center gap-2 mb-3">
          {% for m in plant.media_items %}
            <img
              src="{{ generate_image_url(m) }}"
              class="img-thumbnail thumb{% if hero and m.id==hero.id %} active{% endif %}"
              data-url="{{ generate_image_url(m) }}"
              style="width:clamp(80px,15vw,120px); aspect-ratio:1/1; object-fit:cover; cursor:pointer;"
              alt="Thumbnail"
            >
          {% endfor %}
        </div>
      </div>

      {# ── MOBILE GRID GALLERY ─────────────────────────────── #}
      <div class="d-block d-md-none">
        <div class="row row-cols-3 g-2">
          {% for m in plant.media_items %}
            <div class="col">
              <img
                src="{{ generate_image_url(m) }}"
                class="img-fluid mobile-thumb"
                data-url="{{ generate_image_url(m) }}"
                alt="Image for {{ plant.common_name.name }}"
                style="aspect-ratio:1/1; object-fit:cover; cursor:pointer;"
              >
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  {# ── LIGHTBOX OVERLAY ─────────────────────────────────── #}
  <div id="lightbox-overlay" class="d-none">
    <span class="lightbox-close">&times;</span>
    <img id="lightbox-image" src="" alt="Zoomed image">
  </div>

  <script>
  (function(){
    // Desktop thumbnail swapping
    document.querySelectorAll('.thumb').forEach(thumb => {
      thumb.addEventListener('click', () => {
        const main = document.getElementById('main-image');
        main.src = thumb.dataset.url;
        document.querySelectorAll('.thumb.active')
                .forEach(el => el.classList.remove('active'));
        thumb.classList.add('active');
      });
    });

    // Lightbox logic for mobile
    const overlay = document.getElementById('lightbox-overlay');
    const lbImage = document.getElementById('lightbox-image');
    const closeBtn = document.querySelector('.lightbox-close');

    document.querySelectorAll('.mobile-thumb').forEach(img => {
      img.addEventListener('click', () => {
        lbImage.src = img.dataset.url;
        overlay.classList.remove('d-none');
      });
    });

    // close handlers
    closeBtn.addEventListener('click', () => {
      overlay.classList.add('d-none');
      lbImage.src = '';
    });
    overlay.addEventListener('click', e => {
      if (e.target === overlay) {
        overlay.classList.add('d-none');
        lbImage.src = '';
      }
    });

    // toggle zoom on lightbox image
    lbImage.addEventListener('click', () => {
      lbImage.classList.toggle('zoomed');
    });
  })();
  </script>

  <style>
    /* Lightbox backdrop */
    #lightbox-overlay {
      position: fixed;
      top:0; left:0; width:100vw; height:100vh;
      background: rgba(0,0,0,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1050;
    }
    #lightbox-overlay.d-none { display: none; }

    /* Zoomable image */
    #lightbox-image {
      max-width: 90%;
      max-height: 90%;
      cursor: zoom-in;
      transition: transform 0.3s ease;
    }
    #lightbox-image.zoomed {
      transform: scale(2);
      cursor: zoom-out;
    }

    /* Close “X” */
    .lightbox-close {
      position: absolute;
      top: 1rem; right: 1rem;
      font-size: 2rem;
      color: white;
      cursor: pointer;
      z-index: 1060;
    }
  </style>
{% endblock %}
