<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">Recently Viewed</h5>
      <div class="subtitle">Pick up where you left off</div>
    </div>
    <button class="btn btn-sm btn-outline-primary" onclick="wmSet(WM_STORAGE.recent,[]);render()">Clear</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-clock-history"></i>
      <h5>Nothing viewed yet</h5>
      <p>Vendors you open will show up here for quick access.</p>
      <button class="btn btn-gradient btn-sm mt-2" onclick="window.location.href='vendor-search.html'">Explore Vendors</button>
    </div>
  </div>

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




<script>
  function render() {
    const list = wmGet(WM_STORAGE.recent).map(wmVendor).filter(Boolean);
    const box = document.getElementById('list');
    box.innerHTML = '';
    document.getElementById('empty').classList.toggle('d-none', list.length > 0);
    list.forEach(v => box.appendChild(renderVendorCard(v)));
  }
  render();
</script>
