`src/web/views/list.ejs`

105 lines
<%- include('partials/head', { title: 'All restaurants' }) %>

<main class="container">
  <section class="hero">
    <h1>Every restaurant in LA County.</h1>
    <p class="lede">
      <%= total.toLocaleString() %> spots match your filters · address, cuisine, map.
    </p>

    <form method="get" class="filters" action="/">
      <input type="search" name="q" placeholder="Search by name…" value="<%= q || '' %>" autocomplete="off">
      <select name="city">
        <option value="">All cities</option>
        <% cities.forEach(c => { %>
          <option value="<%= c.city %>" <%= city === c.city ? 'selected' : '' %>><%= c.city %> (<%= c.n.toLocaleString() %>)</option>
        <% }); %>
      </select>
      <select name="cuisine">
        <option value="">Any cuisine</option>
        <% cuisines.forEach(c => { %>
          <option value="<%= c.cuisine %>" <%= cuisine === c.cuisine ? 'selected' : '' %>><%= c.cuisine %> (<%= c.n.toLocaleString() %>)</option>
        <% }); %>
      </select>
      <button type="submit">Filter</button>
      <% if (city || cuisine || q) { %>
        <a href="/" class="clear">Clear</a>
      <% } %>
    </form>
  </section>

  <% if (showHero && typeof newestRows !== 'undefined' && newestRows.length > 0) { %>
    <section class="newest-hero">
      <h2>Newest in Los Angeles</h2>
      <p class="muted" style="margin-top:-0.4rem;font-size:.85rem;">Just opened — sourced from Eater LA, Hoodline, and DPH new permits.</p>
      <ul>
        <% newestRows.forEach(r => { %>
          <li>
            <a href="/r/<%= r.slug %>" class="newest-card">
              <% if (r.source_type === 'press') { %><span class="badge badge-new">NEW</span><% } %>
              <h3><%= r.name %></h3>
              <p class="addr"><%= r.address %><%= r.city ? ', ' + r.city : '' %></p>
              <% if (r.cuisine) { %><p class="cuisine"><%= r.cuisine %></p><% } %>
              <% if (r.opened_on) { %><p class="opened">Opened <%= new Date(r.opened_on + 'T00:00:00').toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}) %></p><% } %>
            </a>
          </li>
        <% }); %>
      </ul>
    </section>
  <% } %>

  <% if (showHero && heroCuisines.length > 0) { %>
    <section class="cuisine-hero">
      <h2>Browse by cuisine</h2>
      <ul>
        <% heroCuisines.forEach(c => { %>
          <li><a href="/?cuisine=<%= encodeURIComponent(c.cuisine) %>">
            <span class="ch-name"><%= c.cuisine %></span>
            <span class="ch-n"><%= c.n.toLocaleString() %></span>
          </a></li>
        <% }); %>
      </ul>
    </section>
  <% } %>

  <ol class="rest-list">
    <% rows.forEach(r => { %>
      <li>
        <a href="/r/<%= r.slug %>" class="rest-card">
          <div class="rest-main">
            <h2><%= r.name %></h2>
            <p class="addr"><%= r.address %><%= r.city ? ', ' + r.city : '' %><%= r.zip ? ' ' + r.zip : '' %></p>
            <% if (r.cuisine) { %>
              <p class="cuisine"><%= r.cuisine %></p>
            <% } %>
            <% if (r.pe_description) { %>
              <p class="pe"><%= r.pe_description %></p>
            <% } %>
          </div>
        </a>
      </li>
    <% }); %>
  </ol>

  <% if (rows.length === 0) { %>
    <p class="empty">No restaurants matched. Try a different filter.</p>
  <% } %>

  <% const totalPages = Math.ceil(total / limit); %>
  <% if (totalPages > 1) { %>
    <nav class="pager">
      <% if (page > 1) { %>
        <% const prev = new URLSearchParams({ ...(q?{q}:{}), ...(city?{city}:{}), ...(cuisine?{cuisine}:{}), page: page - 1 }); %>
        <a href="/?<%= prev %>">← Prev</a>
      <% } %>
      <span>Page <%= page %> of <%= totalPages.toLocaleString() %></span>
      <% if (page < totalPages) { %>
        <% const next = new URLSearchParams({ ...(q?{q}:{}), ...(city?{city}:{}), ...(cuisine?{cuisine}:{}), page: page + 1 }); %>
        <a href="/?<%= next %>">Next →</a>
      <% } %>
    </nav>
  <% } %>
</main>

<%- include('partials/foot') %>