{% macro groupCard(name, description, imageSource, buttonLink) %}
<div class="square col-md-4 mb-5">
<div class="card br-0 b-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 group in groups %}
{% set imageSource = group.images|default(0) ? twig_img_path ~ group.images[0].path : "" %}
{% set groupLink = group.hasChildren ? path('app_group_render_group', {'groupCode': group.code}) : path('app_group_render_group_products', {'groupCode': group.code}) %}
{{ macros.groupCard(group.name, group.description, imageSource, groupLink, 'Hola') }}
{% endfor %}
</div>