<div class="wm-screen">
  <div class="wm-topbar">
    <button class="btn-icon btn-icon-sm" onclick="window.location.href='services-home.html'"><i class="bi bi-arrow-left"></i></button>
    <div class="flex-grow-1">
      <h5 class="title">Saved Vendors</h5>
      <div class="subtitle" id="savedSub"></div>
    </div>
    <button class="btn-icon btn-icon-sm" onclick="window.location.href='compare.html'"><i class="bi bi-list-check"></i><span class="notif-dot" style="position:absolute;top:2px;right:2px"><span data-compare-count>0</span></span></button>
  </div>

  <div class="wm-wrap">
    <div id="list" class="row g-2"></div>
    <div id="empty" class="empty-state d-none">
      <i class="bi bi-heart"></i>
      <h5>No saved vendors yet</h5>
      <p>Tap the heart on any vendor to keep them here for easy access.</p>
      <button class="btn btn-gradient btn-sm mt-2" onclick="window.location.href='vendor-search.html'">Browse Vendors</button>
    </div>
  </div>

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




<script>
  function render() {
    const saved = wmGet(WM_STORAGE.saved).map(wmVendor).filter(Boolean);
    document.getElementById('savedSub').textContent = `${saved.length} saved vendor${saved.length !== 1 ? 's' : ''}`;
    const box = document.getElementById('list');
    box.innerHTML = '';
    document.getElementById('empty').classList.toggle('d-none', saved.length > 0);
    saved.forEach(v => box.appendChild(renderVendorCard(v)));
  }
  render();
</script>
