{% load static %}
{% with fallback=product_img|default:'product-1-292x256.png' %}
<article class="product">
  <div class="product-body">
    <div class="product-info">
      <div class="product-figure">
        {% if product.image_id %}
        <img src="{{ product.image_url }}" alt="{{ product.name }}" width="292" height="256"/>
        {% else %}
        {% with path="images/"|add:fallback %}
        <img src="{% static path %}" alt="{{ product.name }}" width="292" height="256"/>
        {% endwith %}
        {% endif %}
      </div>
      <h5 class="product-title"><a href="{{ product.get_absolute_url }}">{{ product.name }}</a></h5>
      <div class="product-price">${{ product.price }}</div>
      {% with colors=product.colors.all %}
      {% if colors %}
      <div class="product-color-dots" aria-label="Available colors">
        {% for color in colors %}
        <span class="product-color-dot" style="background:{{ color.hex }}" title="{{ color.name }}"></span>
        {% endfor %}
      </div>
      {% endif %}
      {% endwith %}
    </div>
    {% if product.description %}
    <div class="product-description">
      <p class="product-text">{{ product.description|truncatewords:18 }}</p>
    </div>
    {% endif %}
  </div>
  <div class="product-panel">
    <div class="product-price">${{ product.price }}</div>
    <div class="product-link"><a href="{{ product.get_absolute_url }}">View</a></div>
  </div>
</article>
{% endwith %}