WMGZON/templates/content.html

<link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">

{% if products != None %}
    <p>Showing results for {{products|count}} products</p>
    <div class="product-container">
        {% for product in products %}
            <a href="{{ url_for('main.products.product', id=product.id) }}" class="product product-link">
                <div class="product-title">{{product.name}}</div>
                <div class="product-content-container">
                    <img class="product-image-preview" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Brake Disks" loading="lazy"/>

                    <div class="product-details">
                        <div class="product-price">£{{product.cost}}</div>
                        <div class="product-description hide-overflow ">{{product.description}}</div>
                    </div>
                </div>
                <div class="product-selection">
                    <div class="button wmgzon">
                        <p class="btnText">ADD TO BASKET</p>
                        <div class="btnTwo">
                          <p class="btnText2">:)</p>
                        </div>
                    </div>
                </div>
            </a>
        {% endfor %}
    </div>
{% else %}
    <p>Sorry... We have nothing to show here!</p>
{% endif %}