{% trans_default_domain 'products' %}

<div {{ attributes.defaults(stimulus_controller(this.shortName, {
   productId: this.id_product,
   componentKey: this.id_product,
})) }} data-b2b-list
      {{ stimulus_target('product-variations', 'b2bList') }}>
   {% set userB2B = this.isUserB2B %}

   <div class="list-wrapper{% if userB2B %} list-wrapper-b2b{% endif %}">
      <div class="list-item list-item-header list-item-header-desktop">
         <div class="title">{{ 'variations.variant'|trans }}</div>

         {% if userB2B %}
            <div class="price">{{ 'variations.dmocWithVat'|trans }}</div>
            <div class="price-voc">{{ 'variations.vocWithoutVat'|trans }}</div>
         {% else %}
            <div class="price">{{ 'variations.price'|trans }}</div>
         {% endif %}

         <div class="pieces"></div>
      </div>

      <div class="list-item list-item-header list-item-header-resp">
         <div class="title">{{ 'variations.select'|trans }}</div>

         {% if userB2B %}
            <div class="price"></div>
            <div class="price-voc"></div>
         {% else %}
            <div class="price"></div>
         {% endif %}

         <div class="pieces"></div>
      </div>

      {% for variation in this.variations %}
         {% if (this.isHidden and variation.inStore > 0) or not this.isHidden or this.allSoldout %}
            <div class="list-item{% if variation.soldOut %} list-item-soldout{% endif %}">
               <div class="title">
                  <p class="name">{{ variation.title }}</p>

                  {% if this.show_variation_code and (variation.code is not empty) %}
                     <p class="code">{{ 'variations.code'|trans }}: <strong>{{ variation.code }}</strong></p>
                  {% endif %}

                  <twig:Product:DeliveryTime id_product="{{ this.id_product }}" id_variation="{{ variation.id }}"
                                             show_deliveries_info="{{ false }}"
                                             show_in_store="{{ false }}"/>
               </div>

               {% if userB2B %}
                  <div class="price">
                     {# TODO ceny getRetailPrice - je potreba ceniky? #}
                     {% if this.resultPrice(variation).getPrice %}
                        <p class="discount-price">{{ this.resultPrice(variation).getPrice|formatPrice(withVat: true) }}</p>
                     {% endif %}</div>
                  <div class="price-voc">
                     {% if this.resultPrice(variation).getOriginalPrice %}
                        <del class="strike-price">{{ this.resultPrice(variation).getOriginalPrice|formatPrice(withVat: false) }}</del>
                     {% endif %}

                     <p class="discount-price">{{ this.resultPrice(variation).getPrice|formatPrice(withVat: false) }}</p>
                  </div>
               {% else %}
                  <div class="price">
                     {# TODO ceny getRetailPrice - je potreba ceniky? #}
                     <p class="discount-price">{{ this.resultPrice(variation).getPrice|formatPrice(withVat: true) }}</p>
                  </div>
               {% endif %}

               <div class="pieces">
                  {% if variation.soldOut %}
                     {% if userB2B %}
                        {% if not this.isWatchdog(variation.id) %}
                           <button type="button" class="btn-watchdog"
                                   data-action="live#action"
                                   data-live-action-param="addWatchdog"
                                   data-live-id-variation-param="{{ variation.id }}"
                                   data-ajax-watchdog>
                              <twig:ux:icon name="watchdog" class="c-icon"/> {{ 'variations.watch'|trans }}</button>
                        {% else %}
                           <button type="button" class="btn-watchdog"
                                   data-action="live#action"
                                   data-live-action-param="removeWatchdog"
                                   data-live-id-variation-param="{{ variation.id }}"
                                   data-ajax-watchdog>
                              <twig:ux:icon name="watchdog" class="c-icon"/> {{ 'variations.cancel'|trans }}</button>
                        {% endif %}
                     {% else %}
                        <twig:Product:CustomLinks:LinkItem id_product="{{ this.id_product }}" id_variation="{{ variation.id }}"
                                                           type="watchdog"/>
                     {% endif %}
                  {% else %}
                     <input type="hidden"
                            name="items[{{ variation.id }}][id_variation]"
                            value="{{ variation.id }}" {{ stimulus_target(this.shortName, 'variationId') }}>

                     <div class="buy-count-wrapper">
                        <div class="buy-count">
                           <button type="button"
                                 {{ stimulus_target(this.shortName, 'buyCountButton') }}
                                 {{ stimulus_action(this.shortName, 'decreaseBuyCount', 'click', {
                                    inputName: "items[#{ variation.id }][pieces]",
                                 }) }}
                                   title="{{ 'variations.remove'|trans }}"
                                   data-input-name="items[{{ variation.id }}][pieces]"
                                   data-count-unit="minus">
                              <twig:ux:icon name="minus" class="c-icon"/>
                           </button>
                        </div>

                        <input class="form-control"
                               type="number"
                               name="items[{{ variation.id }}][pieces]"
                               title="{{ 'variations.pieces'|trans }}"
                               aria-label="{{ 'variations.pieces'|trans }}"
                               value="0"
                               max="{{ variation.totalAvailablePieces }}"
                               min="0"
                               data-filter="noreload"
                               data-input-name="items[{{ variation.id }}][pieces]"
                               data-variation-id="{{ variation.id }}"
                              {{ stimulus_target(this.shortName, 'variationPieces') }}
                              {{ stimulus_action(this.shortName, 'onInputChange', 'input') }}
                        >

                        <div class="buy-count">
                           <button type="button"
                                 {{ stimulus_target(this.shortName, 'buyCountButton') }}
                                 {{ stimulus_action(this.shortName, 'increaseBuyCount', 'click', {
                                    inputName: "items[#{ variation.id }][pieces]",
                                 }) }}
                                   title="{{ 'variations.add'|trans }}"
                                   data-input-name="items[{{ variation.id }}][pieces]"
                                   data-count-unit="plus">
                              <twig:ux:icon name="plus" class="c-icon"/>
                           </button>
                        </div>
                     </div>
                  {% endif %}
               </div>
            </div>
         {% endif %}
      {% endfor %}
   </div>

   <div class="list-footer">
      <div>
         {% if not this.allInStore and not this.allSoldout %}
            <button type="button"
                    class="toggler{% if not this.isHidden %} active{% endif %}"
                    {{ live_action('toggle') }}>
               <twig:ux:icon name="caret-down" class="c-icon"/> {{ this.toggleText }}</button>
         {% endif %}
      </div>

      {% if this.show_total_count %}
         <div>
            <p class="total-count">
               {{ 'total'|trans }} <span {{ stimulus_target(this.shortName, 'totalCount') }}>0</span> {{ 'pieces.ks'|trans }}
            </p>
         </div>
      {% endif %}
   </div>
</div>
