{% load humanize %}
{% for p in listings %}
<div class="col">
  <div class="card card-pricing">

    <div class="sub-heading text-center justify-content-center">
      <i class="{{ p.icon_class|default:'fa-solid fa-globe' }}"></i>
      <h6 class="font-family-1 accent-color text-center">Premium Domain</h6>
    </div>

    <div class="card price-container">
      <div class="price-wrapper">
        <span class="price">{{ p.name }}</span>
        {% if p.auction_status == 'reserved' %}
        <span class="dom-status reserved">Reserved</span>
        {% elif p.auction_status == 'sold' %}
        <span class="dom-status sold">Sold</span>
        {% elif p.badge %}
        <span style="display:inline-block;background:{{ p.badge_bg }};color:{{ p.badge_color }};border:1px solid {{ p.badge_color }}33;border-radius:99px;padding:.2rem .6rem;font-size:.65rem;font-weight:700;margin-top:.35rem">{{ p.badge }}</span>
        {% endif %}
      </div>
    </div>

    <div class="dom-buy">
      {% if p.sale_method == 'offer' %}
        {% if p.auction_min_offer %}
        <span class="price dom-amount">&pound;{{ p.auction_min_offer|intcomma }}</span>
        <a href="{% url 'auction_detail' p.slug %}" class="btn btn-accent dom-cta">Make an Offer</a>
        {% else %}
        <a href="{% url 'auction_detail' p.slug %}" class="btn btn-accent dom-cta dom-cta-wide">Make an Enquiry</a>
        {% endif %}
      {% else %}
        {% if p.price %}
        <span class="price dom-amount">&pound;{{ p.price|intcomma }}</span>
        <a href="{% url 'auction_detail' p.slug %}" class="btn btn-accent dom-cta">Buy Now</a>
        {% else %}
        <a href="{% url 'auction_detail' p.slug %}" class="btn btn-accent dom-cta dom-cta-wide">View Details</a>
        {% endif %}
      {% endif %}
    </div>

  </div>
</div>
{% endfor %}
{% if listings.has_next %}
<div id="load-more-sentinel" data-next-page="{{ listings.next_page_number }}"></div>
{% endif %}