{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
<table class="table table-perso" id="sylius-product-variants" {{ sylius_test_html_attribute('product-variants') }}>
<thead class="card-header">
<tr>
<th class="border-0 h6 text-white">{{ 'sylius.ui.variant'|trans }}</th>
<th class="border-0 h6 text-white">{{ 'sylius.ui.price'|trans }}</th>
<th class="border-0 h6 text-white"></th>
</tr>
</thead>
<tbody>
{% for key, variant in product.variants %}
{% set channelpricing = variant.getChannelPricingForChannel(sylius.channel) %}
{% set percentage = channelpricing.getDiscountedPercentage %}
<tr>
<td>
{{ variant.name }}
{# {% if product.hasOptions() %}#}
{# {% for optionValue in variant.optionValues %}#}
{# <span class="pr-1">{{ optionValue.value }}</span>#}
{# {% endfor %}#}
{# {% endif %}#}
</td>
<td data-js-product-variant-price class="sylius-product-variant-price"><strong>{{ money.calculatePrice(variant) }}</strong></td>
{% set inputAttr = {'data-value': money.calculatePrice(variant), 'data-stock': sylius_inventory_is_available(variant)} %}
{% if channelpricing.discountedPrice is not null %}
{% set inputAttr = inputAttr|merge({'data-discounted-value': money.convertAndFormat(channelpricing.discountedPrice)}) %}
{% if channelpricing.price > channelpricing.discountedPrice %}
{% set inputAttr = inputAttr|merge({'data-percentage': percentage|round(0) ~ '%'}) %}
{% endif %}
{% endif %}
<td class="text-right">
{{ form_widget(form.cartItem.variant[key], {'label': false, 'attr': inputAttr }) }}
</td>
</tr>
{% endfor %}
</tbody>
</table>