<div class="card <%= vehicle.Sold ? 'is-out-of-stock' : '' %>">
  <!-- Card Image -->
  <div class="card-image">
    <figure class="image is-4by3">
      <% if (vehicle.Images instanceof Array && typeof vehicle.Images[0] === "object" && typeof vehicle.Images[0].url === "string") { %>
        <img src="<%=vehicle.Images[0].url%>>" alt="Product image">
      <% } else { %>
        <img src="https://api.placeholder.app/image/1280x960?text=Coming Soon..." alt="Placeholder product image">
      <% } %>
    </figure>
  </div>

  <!-- Card Tags -->
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4"><%= vehicle.ModelYear %> <%= vehicle.Make %> <%= vehicle.Model %></p>
        <p class="subtitle is-6">
          <!-- Basic Attributes -->
          <% if (typeof(vehicle.Odometer) === "number" && vehicle.Odometer > 0) { %>
            <span><%= (Math.round(Number(vehicle.Odometer) / 100) * 100).toLocaleString()  %>mi</span>
          <% } %>
          <% if (typeof(vehicle.EPA) === "object" && typeof(vehicle.EPA.City) === "number" && typeof(vehicle.EPA.Highway) === "number") { %>
            &middot;
            <span>EPA <%= vehicle.EPA.City %> / <%= vehicle.EPA.Highway %> mpg</span>
          <% } %>

          <!-- Feature Tags -->
          <% if (vehicle.Owners && vehicle.Owners === 1) { %>
            &middot;
            <span class="tag is-success">1 OWNER</span>
          <% } else if (typeof(vehicle.Odometer) === "number" && vehicle.Odometer <= 20000) { %>
            &middot;
            <span class="tag is-link">LOW MILES</span>
          <% } else if (typeof(vehicle.EPA) === "object" && typeof(vehicle.EPA.City) === "number" && typeof(vehicle.EPA.Highway) === "number" && (vehicle.EPA.City >= 35 || vehicle.EPA.Highway >= 35)) { %>
            &middot;
            <span class="tag is-primary">Fuel Efficient</span>
          <% } %>
        </p>
      </div>
    </div>
  </div>

  <!-- Pricing Table -->
  <% if (context.page !== "listing" && typeof(vehicle.MSRP) === "string" && typeof(vehicle.Price) === "string") { %>
    <div class="content">
      <div class="px-3 has-text-centered">
        <nav class="level is-mobile">
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">Original MSRP</p>
              <p class="title has-text-weight-normal">
                <%= parseFloat(vehicle.MSRP).toLocaleString('en-US', {
                  style: 'currency',
                  currency: 'USD',
                  minimumFractionDigits: 0
                }) %>
              </p>
            </div>
          </div>
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">Our Price</p>
              <p class="title">
                <%= parseFloat(vehicle.Price).toLocaleString('en-US', {
                  style: 'currency',
                  currency: 'USD',
                  minimumFractionDigits: 0
                }) %>
              </p>
            </div>
          </div>
        </nav>
      </div>
    </div>
  <% } %>

  <!-- Card Footer -->
  <footer class="card-footer">
    <a href='<%= env.APPLICATION_INVENTORY_URL + "/" + vehicle.StockNum %>' class="card-footer-item">View More Details</a>
    <a href="#" class="card-footer-item">Share</a>
  </footer>
</div>
