<div class="directory-page">
  <!-- Search Bar -->
  <form class="dir-search-bar" method="GET">
    <div class="dir-search-input"><i class="bi bi-search"></i><input type="text" name="search" value="<%= search %>" placeholder="Search businesses by name, keyword, or service..."></div>
    <select name="category" class="dir-filter-select"><option value="">All Categories</option><% categories.forEach(c => { %><option value="<%= c.id %>" <%= (category == c.id) ? 'selected' : '' %>><%= c.name %></option><% }) %></select>
    <input type="text" name="city" value="<%= city %>" placeholder="City" class="dir-filter-input">
    <input type="text" name="state" value="<%= state %>" placeholder="State" class="dir-filter-input dir-filter-sm">
    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i> Search</button>
  </form>

  <div class="dir-meta"><p><strong><%= total %></strong> businesses found <% if(search) { %>for "<%= search %>"<% } %></p></div>

  <% if (members && members.length) { %>
  <div class="member-dir-grid">
    <% members.forEach(m => { %>
    <div class="dir-card">
      <div class="dir-card-header">
        <% if (m.logo) { %><img src="<%= m.logo %>" alt="<%= m.name %>" class="dir-logo"><% } else { %><div class="dir-logo-placeholder"><%= m.name[0] %></div><% } %>
        <% if (m.is_featured) { %><span class="dir-featured-badge"><i class="bi bi-patch-check-fill"></i></span><% } %>
      </div>
      <div class="dir-card-body">
        <h3><a href="/member/directory/<%= m.slug %>"><%= m.name %></a></h3>
        <p class="dir-category"><i class="bi bi-tag-fill"></i> <%= m.category_name || 'Business' %></p>
        <% if (m.city || m.state) { %><p class="dir-location"><i class="bi bi-geo-alt-fill"></i> <%= [m.city, m.state].filter(Boolean).join(', ') %></p><% } %>
        <% if (m.short_description) { %><p class="dir-desc"><%= m.short_description.substring(0,80) %>...</p><% } %>
        <% if (m.rating > 0) { %><div class="dir-rating"><% for(let i=1;i<=5;i++) { %><i class="bi bi-star<%= i <= Math.round(m.rating) ? '-fill' : '' %>"></i><% } %> <span><%= parseFloat(m.rating).toFixed(1) %> (<%= m.review_count %>)</span></div><% } %>
      </div>
      <div class="dir-card-footer">
        <a href="/member/directory/<%= m.slug %>" class="btn btn-primary btn-sm btn-block">View Profile</a>
        <button class="btn btn-ghost btn-sm fav-btn" data-id="<%= m.id %>" title="<%= m.is_favorited ? 'Remove from favorites' : 'Add to favorites' %>">
          <i class="bi bi-heart<%= m.is_favorited ? '-fill' : '' %>"></i>
        </button>
      </div>
    </div>
    <% }) %>
  </div>

  <!-- Pagination -->
  <% const totalPages = Math.ceil(total / limit); %>
  <% if (totalPages > 1) { %>
  <div class="pagination">
    <% if (page > 1) { %><a href="?page=<%= page-1 %>&search=<%= search %>&category=<%= category %>&city=<%= city %>" class="page-btn"><i class="bi bi-chevron-left"></i></a><% } %>
    <% for(let i=Math.max(1,page-2); i<=Math.min(totalPages,page+2); i++) { %><a href="?page=<%= i %>&search=<%= search %>&category=<%= category %>&city=<%= city %>" class="page-btn <%= i === page ? 'active' : '' %>"><%= i %></a><% } %>
    <% if (page < totalPages) { %><a href="?page=<%= page+1 %>&search=<%= search %>&category=<%= category %>&city=<%= city %>" class="page-btn"><i class="bi bi-chevron-right"></i></a><% } %>
  </div>
  <% } %>

  <% } else { %>
  <div class="empty-state"><i class="bi bi-search"></i><h3>No businesses found</h3><p>Try a different search term or browse all categories.</p><a href="/member/directory" class="btn btn-primary">Clear Filters</a></div>
  <% } %>
</div>

<script>
document.querySelectorAll('.fav-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    const id = btn.dataset.id;
    const res = await fetch(`/member/directory/${id}/favorite`, { method: 'POST', headers: {'Content-Type':'application/json'} });
    const data = await res.json();
    btn.querySelector('i').className = data.favorited ? 'bi bi-heart-fill' : 'bi bi-heart';
    btn.title = data.favorited ? 'Remove from favorites' : 'Add to favorites';
  });
});
</script>
