{% macro productCard(name, description, imageSource, buttonLink) %}
<div class="square col-md-4 mb-5">
<div class="card br-0">
<img src="{{ imageSource }}" class="card-img-top br-0" alt="Card Image">
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end px-0">
<div class="w-100 bg-semi-transparent content-card px-0 mx-0 d-flex flex-row align-items-center">
<a href="{{ buttonLink }}">
<h6 class="card-title col-12 my-0 ct-blue fs-18 ff-os-bold">{{ name }}</h6>
</a>
</div>
</div>
</div>
</div>
{% endmacro %}
{% import _self as macros %}
{% set twig_img_path = absolute_url('/media/image/') %}
<div class="row">
{% for product in products %}
{% set imageSource = product.images|default(0) ? twig_img_path ~ product.images[0].path : "/build/images/no_product_image.jpg" %}
{% set productLink = products|default(0) ? path('app_custom_product', {'productCode': product.code}) : '#' %}
{{ macros.productCard(product.name, product.description, imageSource, productLink) }}
{% endfor %}
</div>