<table class="table table-bordered">
    <tbody>

    {foreach $recommandation.products as $key => $recommandationProduct}
        {if $recommandationProduct.product !== null}
            <tr class="hide-xs">
                <td>Aliment
                    n°{$key +1}{if $recommandationProduct.months} (jusqu'à {$recommandationProduct.months - 1} mois){/if}
                </td>
                <td>
                    <img class="img-fluid card-img-top"
                         src="{$link->getImageLink($recommandationProduct.product->link_rewrite, $recommandationProduct.image_id, 'home_default')|escape:'html':'UTF-8'}"
                         alt="{$recommandationProduct.product->name|escape:'html':'UTF-8'}"
                    />
                </td>
                <td>
                    {$recommandationProduct.product->name}
                </td>
                <td>
                    Ration : {$recommandationProduct.quantity}g/jour
                </td>
                <td>
                    <a href="{$link->getProductLink($recommandationProduct.product->id)}"
                       class="btn btn-primary"><span><i class="fas fa-arrow-right right"></i> Voir le produit</span>
                    </a>
                </td>
            </tr>
            <tr class="show-xs">
                <td>
                    <div style="display: inline; vertical-align: middle">
                        <input
                                {if $recommandation.idRecommandationProduct == $recommandationProduct.id}checked=checked{/if}
                                type="radio" id="reco-{$recommandationProduct.id}-product"
                                name="id_recommandation_product" value="{$recommandationProduct.id}">
                        <label class="show-xs" style="vertical-align: inherit"
                               for="reco-{$recommandationProduct.id}-product">Aliment
                            n°{$key + 1} {* {if $recommandationProduct->hasNext()} - jusqu'à {$recommandationProduct->months - 1} mois {else} - après {$recommandationProduct->months - 1} mois{/if} *}</label>
                    </div>
                    <div style="width: 100%">

                        <img style="margin: auto" class="replace-2x img-responsive"
                             src="{$link->getImageLink($recommandationProduct.product->link_rewrite, $recommandationProduct.image_id, 'home_default')|escape:'html':'UTF-8'}"
                             alt="{if !empty($recommandationProduct.product->legend)}{$recommandationProduct.product->legend|escape:'html':'UTF-8'}{else}{$recommandationProduct.product->name|escape:'html':'UTF-8'}{/if}"
                             title="{if !empty($recommandationProduct.product->legend)}{$recommandationProduct.product->legend|escape:'html':'UTF-8'}{else}{$recommandationProduct.product->name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}
                        />

                        <strong>{$recommandationProduct.product->name}</strong>

                        Ration : {$recommandationProduct.quantity}g/jour*

                        <a href="{$link->getProductLink($recommandationProduct.product->id)}" class="btn btn-primary">
                            <span>
                                <i class="fas fa-arrow-right right"></i>
                                Voir le produit
                            </span>
                        </a>
                    </div>
                </td>
            </tr>
        {/if}
    {/foreach}
    </tbody>
</table>
