{% trans_default_domain 'products' %}
<div
   {{ attributes.defaults(stimulus_controller(this.shortName, {
      componentKey: this.id_product,
   })) }}
   data-js-cart-product="{{ this.jsCartProduct|json_encode }}"
   data-js-cart-buy-count="{{ this.buyCountData|json_encode }}"
>
   <div data-buy-count-target data-live-ignore id="buy-count-{{ this.id_product }}"></div>
   {# Tohle je jen placeholder markup, renderuje se to pak v reactu: js-shop/productCounter/... #}
   <div data-remove-me data-live-ignore>
      <input
            class="form-control"
            type="number"
            name="No"
            title="{{ 'pieces.count'|trans }}"
            value="{{ this.step }}"
            step="{{ this.step }}"
            min="{{ this.step }}"
            {% if this.max %}
               max="{{ this.max }}"
            {% endif %}
            data-precision="{{ this.precision }}"
            data-filter="noreload"
            {{ stimulus_target(this.shortName, 'input') }}
      >
      <div>
         <button type="button" class="plus_unit" title="Přidat {{ this.step }} {{ this.shortcut }}">
            <twig:ux:icon name="caret-up" class="c-icon"/>
         </button>
         <button type="button" class="minus_unit" title="Odebrat {{ this.step }} {{ this.shortcut }}">
            <twig:ux:icon name="caret-down" class="c-icon"/>
         </button>
      </div>
   </div>
</div>
