`views/rep.ejs`

70 lines
<%- include('partials/head', { title: rep.name + ' — ' + rep.agency + ' | ' + site.name, description: rep.agency + ' represents ' + rep.lines.join(', ') + ' in ' + rep.territories.join(', ') + '. Independent commercial design rep for ' + rep.vertical.join(', ') + '.' }) %>

<main class="wrap main">
  <a class="back-link" href="/">&larr; Back to directory</a>

  <section class="rep-detail">
    <div class="rep-header">
      <div class="rep-avatar lg"><%= rep.name.split(' ').map(s => s[0]).join('').slice(0,2) %></div>
      <div>
        <h1><%= rep.name %></h1>
        <div class="agency"><%= rep.agency %></div>
        <div class="city muted"><%= rep.city %></div>
      </div>
    </div>

    <div class="rep-grid-detail">
      <div>
        <h3>Territories</h3>
        <div class="chips">
          <% rep.territories.forEach(function(t){ %><span class="chip"><%= t %></span><% }) %>
        </div>
      </div>
      <div>
        <h3>Verticals</h3>
        <div class="chips">
          <% rep.vertical.forEach(function(v){ %><span class="tag"><%= v %></span><% }) %>
        </div>
      </div>
      <div>
        <h3>Lines carried</h3>
        <ul class="lines-list">
          <% rep.lines.forEach(function(l){ %><li><%= l %></li><% }) %>
        </ul>
      </div>
    </div>

    <div class="cta-row">
      <a class="btn-primary" href="<%= rep.contact_url %>" target="_blank" rel="noopener noreferrer">Contact agency &rarr;</a>
      <a class="btn-ghost" href="mailto:<%= site.email %>?subject=Question%20about%20<%= encodeURIComponent(rep.agency) %>">Ask the directory</a>
    </div>
  </section>

  <% if (related.length) { %>
  <section class="related">
    <h2>Other reps in similar verticals</h2>
    <ul class="rep-grid" style="--cols-min: 280px">
      <% related.forEach(function(r){ %>
        <li class="rep-card">
          <a class="rep-link" href="/rep/<%= r.id %>">
            <div class="rep-card-head">
              <div class="rep-avatar"><%= r.name.split(' ').map(s => s[0]).join('').slice(0,2) %></div>
              <div>
                <div class="rep-name"><%= r.name %></div>
                <div class="rep-agency"><%= r.agency %></div>
              </div>
            </div>
            <div class="rep-meta">
              <span class="chip city"><%= r.city %></span>
              <% r.territories.slice(0,3).forEach(function(t){ %><span class="chip"><%= t %></span><% }) %>
            </div>
          </a>
        </li>
      <% }) %>
    </ul>
  </section>
  <% } %>
</main>

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