<%- include('../layouts/header'); -%>

<section
  class="hero-wrap hero-wrap-2 ftco-degree-bg js-fullheight"
  style="background-image: url('<%- baseUrl %>/images/bg_1.jpg')"
  data-stellar-background-ratio="0.5"
>
  <div class="overlay"></div>
  <div class="overlay-2"></div>
  <div class="container">
    <div
      class="row no-gutters slider-text js-fullheight align-items-end justify-content-center"
    >
      <div class="col-md-9 ftco-animate pb-5 mb-5 text-center">
        <h1 class="mb-3 bread">Agents</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>Agents <i class="ion-ios-arrow-forward"></i></span>
        </p>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section ftco-agent">
  <div class="container">
    <div class="row">
      <% agents?.forEach(agent=>{ %>
      <div class="col-md-3 ftco-animate">
        <div class="agent">
          <div class="img">
            <img
              src="<% if(agent?.image){ %><%- agent?.image %><% }else{ %><%- baseUrl %>/images/team-1.jpg<% } %>"
              class="img-fluid"
              style="height: 355px; width: 281px"
              alt="Agent"
            />
          </div>
          <div class="desc">
            <h3>
              <a href="/properties"
                ><%- agent?.firstName %> <%- agent?.lastName %></a
              >
            </h3>
            <p class="h-info">
              <span class="ion-ios-filing icon"></span>
              <span class="details"
                ><%- agent?.property?.totalCount %> Properties</span
              >
            </p>
          </div>
        </div>
      </div>
      <% }) %>
    </div>
    <!-- <div class="row mt-5">
      <div class="col text-center">
        <div class="block-27">
          <ul>
            <li><a href="#">&lt;</a></li>
            <li class="active"><span>1</span></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&gt;</a></li>
          </ul>
        </div>
      </div>
    </div> -->
  </div>
</section>

<%- include('../layouts/footer'); -%>
