<div {{ attributes.defaults(stimulus_controller(this.shortName, {
   productIds: this.productIds|keys,
   useCart: this.useCartToRemoveItems,
})) }}>
   <div class="header-collection">
      <span class="title">{{ this.title }}</span>
      <div class="header-collection-right">
         <span {{ stimulus_target(this.shortName, 'total') }}>0</span>
         <button type="button" class="delete" {{ stimulus_action(this.shortName, 'removeFromCart', 'click') }}>
            <twig:ux:icon name="trash" class="c-icon"/>
         </button>
      </div>
   </div>

   <div class="table-item-content{% if not this.variationValues %} no-variations{% endif %}">
      <div class="table-item-wrapper">
         <div class="empty"></div>
         {% for productId in this.productIds %}
            <div class="table-item-row">
               <twig:ProductList:TableView:TableProduct id_product="{{ productId }}" track="{{ this.track }}" showModal="{{ this.showModal }}"/>
            </div>
         {% endfor %}
      </div>
      <div class="variations-wrapper-content">
         {% block header %}
            <div class="header-variations">
               {% for var in this.variationValues %}
                  <span class="variation-title">{{ var }}</span>
               {% else %}
                  <span class="variation-title">&emsp;</span>
               {% endfor %}
            </div>
         {% endblock %}
         {% for productId in this.productIds %}
            <twig:block name="row">
               <twig:ProductList:TableView:GroupRow filterParams="{{ this.filterParams }}" id_product="{{ productId }}" variationValues="{{ this.variationValues }}" track="{{ this.track }}" />
            </twig:block>
         {% endfor %}
      </div>
      <div class="total-content">
         <div class="empty-total"></div>
         {% for productId in this.productIds %}
            <div class="total">
               <span {{ stimulus_target(this.shortName, 'rowTotal') }} data-product-id="{{ productId }}">0</span>
            </div>
         {% endfor %}
      </div>
   </div>
</div>
