`views/public/reps.ejs`

64 lines
<%- include('../partials/head', { title }) %>
<%- include('../partials/header') %>

<main class="reps-page">
  <section class="section">
    <div class="wrap">
      <h1>Browse Sales Reps</h1>
      <p class="muted">Filter by territory, vertical, or search by agency / city / name.</p>

      <form class="filter-form" method="get" action="/reps">
        <label class="control">
          <span>Search</span>
          <input type="search" name="q" placeholder="agency, name, or city" value="<%= filter.q || '' %>">
        </label>
        <label class="control">
          <span>Territory</span>
          <input type="text" name="territory" placeholder="e.g. CA" maxlength="2" value="<%= filter.territory || '' %>">
        </label>
        <label class="control">
          <span>Vertical</span>
          <select name="vertical">
            <option value="">All</option>
            <% ['Residential','Hospitality','Contract','Commercial','Healthcare','Education','Hotel Brand','Boutique','Luxury','Resort','Retail','Office','F&B'].forEach(function (v) { %>
              <option value="<%= v %>" <%= filter.vertical === v ? 'selected' : '' %>><%= v %></option>
            <% }) %>
          </select>
        </label>
        <button class="btn primary" type="submit">Filter</button>
        <a class="btn ghost" href="/reps">Reset</a>
      </form>

      <%- include('../partials/grid-controls', { total, sortKey }) %>

      <div class="rep-grid" data-rep-grid>
        <% reps.forEach(function (r) { %>
          <article class="rep-card">
            <header>
              <h3><a href="/reps/<%= r.slug %>"><%= r.agency %></a></h3>
              <p class="muted"><%= r.name %><% if (r.city) { %> · <%= r.city %><% } %></p>
            </header>
            <% if (r.lines && r.lines.length) { %>
              <p class="lines"><strong>Lines:</strong> <%= r.lines.join(', ') %></p>
            <% } %>
            <% if (r.territories && r.territories.length) { %>
              <p class="territories"><strong>Territory:</strong> <%= r.territories.join(' · ') %></p>
            <% } %>
            <% if (r.vertical && r.vertical.length) { %>
              <ul class="tags">
                <% r.vertical.forEach(function (v) { %><li><%= v %></li><% }) %>
              </ul>
            <% } %>
          </article>
        <% }); %>
        <% if (!reps.length) { %>
          <p class="empty">No reps match those filters yet. Try resetting or <a href="/claim">add yours</a>.</p>
        <% } %>
      </div>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>
<script src="/js/grid-controls.js" defer></script>