<div class="wm-screen">
  <div class="wm-topbar">
    <button class="btn-icon btn-icon-sm" onclick="window.location.href='vendor-details.html?id='+getId()"><i class="bi bi-arrow-left"></i></button>
    <div class="flex-grow-1">
      <h5 class="title" id="gTitle">Gallery</h5>
      <div class="subtitle" id="gSub"></div>
    </div>
  </div>

  <div class="wm-wrap">
    <div class="gallery-grid mb-3" id="gallery"></div>
    <div class="wm-divider"><span>Work Highlights</span></div>
    <div id="feature"></div>
  </div>

  <!-- Lightbox -->
  <div class="wm-lightbox" id="lightbox" onclick="this.classList.remove('show')">
    <img id="lbImg" alt="">
    <button class="close" onclick="document.getElementById('lightbox').classList.remove('show')"><i class="bi bi-x-lg"></i></button>
  </div>

  {{> weddings-bottom-nav}}
</div>




<script>
  const id = new URLSearchParams(location.search).get('id') || 'v1';
  const v = wmVendor(id);
  function getId() { return id; }
  document.getElementById('gTitle').textContent = v.name;
  document.getElementById('gSub').textContent = 'Gallery · ' + wmCat(v.cat).name;

  const gallery = document.getElementById('gallery');
  const base = v.img;
  const shots = [base, 'photo-1465495976277-4387d4b0b4c6', 'photo-1519741497674-611481863552', 'photo-1511285560929-80b456fea0bc', 'photo-1522673607200-164d1b6ce486', 'photo-1469371670807-013ccf25f16a', 'photo-1519167758481-83f550bb49b3', 'photo-1529634806980-85c3dd6d34ac', 'photo-1532712938310-34cb3982ef74'];
  shots.forEach((ph, i) => {
    const img = document.createElement('img');
    img.src = wmImg(ph, 300, 300);
    img.loading = 'lazy';
    img.style.gridColumn = (i === 0) ? 'span 2' : '';
    img.style.gridRow = (i === 0) ? 'span 2' : '';
    img.onclick = () => { document.getElementById('lbImg').src = wmImg(ph, 900, 700); document.getElementById('lightbox').classList.add('show'); };
    gallery.appendChild(img);
  });

  const feat = document.getElementById('feature');
  ['photo-1505236858219-8359eb29e329', 'photo-1522673607200-164d1b6ce486', 'photo-1511285560929-80b456fea0bc', 'photo-1519741497674-611481863552'].forEach(ph => {
    const col = document.createElement('div');
    col.className = 'col-6';
    col.innerHTML = `<div class="card-premium overflow-hidden mb-2"><img src="${wmImg(ph)}" class="w-100" style="height:160px;object-fit:cover" loading="lazy" onclick="window.open('${wmImg(ph,900,700)}','_blank')"></div>`;
    feat.appendChild(col);
  });
</script>
