{% set prefix = display == 'grid' ? 'ProductGrid' : 'ProductList' %}
  <div class="product-layout {{ journal3.classes(product.classes) }} {{ color_scheme_content }}" data-product-id="{{ product.product_id }}">
    <div class="product-thumb">
      {% if (journal3.getIn(prefix ~ 'NamePosition', _context) == "image") %}
        <div class="name"><a href="{{ product.href }}" title="{{ product.name }}">{{ product.name }}</a></div>
      {% endif %}
      <div class="image-group">
        <div class="image">
          {% if journal3.get('quickviewStatus') %}
            <div class="quickview-button">
              <a class="btn btn-quickview" role="button" aria-label="{{ journal3.get('quickviewText') }}" {% if journal3.is_desktop and journal3.getIn(prefix ~ 'QuickviewDisplay', _context) == 'icon' and journal3.getIn(prefix ~ 'QuickviewTooltipStatus', _context) %}data-toggle="tooltip-hover" data-tooltip-class="{{ module_id ? 'module-products-' ~ module_id ~ ' module-products-grid' : 'product-grid' }} quickview-tooltip" data-placement="{{ journal3.getIn(prefix ~ 'QuickviewTooltipPosition', _context) }}" title="{{ journal3.get('quickviewText') }}"{% endif %} onclick="quickview('{{ product.product_id }}')"><span class="btn-text">{{ journal3.get('quickviewText') }}</span></a>
            </div>
          {% endif %}

          <a href="{{ product.href }}" class="product-img {% if product.second_thumb %}has-second-image{% endif %}" title="{{ product.name }}">
            <div>
              {% if journal3.get('performanceLazyLoadImagesStatus') %}
                <img src="{{ dummy_image }}" data-src="{{ product.thumb }}" {% if product.thumb2x %}data-srcset="{{ product.thumb }} 1x, {{ product.thumb2x }} 2x" {% endif %} width="{{ image_width }}" height="{{ image_height }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive img-first lazyload"/>
              {% else %}
                <img src="{{ product.thumb }}" {% if product.thumb2x %}srcset="{{ product.thumb }} 1x, {{ product.thumb2x }} 2x" {% endif %} width="{{ image_width }}" height="{{ image_height }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive img-first"/>
              {% endif %}

              {% if product.second_thumb %}
                {% if journal3.get('performanceLazyLoadImagesStatus') %}
                  <img src="{{ dummy_image }}" data-src="{{ product.second_thumb }}" {% if product.second_thumb2x %}data-srcset="{{ product.second_thumb }} 1x, {{ product.second_thumb2x }} 2x" {% endif %} width="{{ image_width }}" height="{{ image_height }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive img-second lazyload"/>
                {% else %}
                  <img src="{{ product.second_thumb }}" {% if product.second_thumb2x %}srcset="{{ product.second_thumb }} 1x, {{ product.second_thumb2x }} 2x" {% endif %} width="{{ image_width }}" height="{{ image_height }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive img-second"/>
                {% endif %}
              {% endif %}
            </div>
          </a>

          {% if product.labels.default %}
            <div class="product-labels">
              {% for id, label in product.labels.default %}
                <span class="product-label product-label-{{ id }} product-label-{{ label.display }} product-label-{{ label.positionDefault }} {{ journal3.classes(label.classes) }}"><strong>{{ label.label }}</strong></span>
              {% endfor %}
            </div>
          {% endif %}

          {% if journal3.get('countdownStatus') and product.date_end %}
            <div class="countdown" data-date="{{ product.date_end }}"></div>
          {% endif %}
        </div>
        {% if product.labels.group_outside %}
          <div class="product-labels-outside">
            {% for id, label in product.labels.group_outside %}
              <span class="product-label product-label-{{ id }} product-label-{{ label.display }} {{ journal3.classes(label.classes) }}"><strong><a class="label-link" {% if label.link.href %}href="{{ label.link.href }}"{%  endif %} {{ journal3.linkAttrs(label.link) }} aria-hidden="true" tabindex="-1">{{ label.label }}</a></strong></span>
            {% endfor %}
          </div>
        {% endif %}
      </div>

      <div class="caption">
        {% if product.stat1 or product.stat2 %}
          <div class="stats">
            <div class="stats-group">
              {% if product.stat1 %}
                <span class="stat-1"><span class="stats-label">{{ product.stat1.label }}:</span> <span>{{ product.stat1.text }}</span></span>
              {% endif %}
              {% if product.stat2 %}
                <span class="stat-2"><span class="stats-label">{{ product.stat2.label }}:</span> <span>{{ product.stat2.text }}</span></span>
              {% endif %}
            </div>
          </div>
        {% endif %}

        {% if (journal3.getIn(prefix ~ 'NamePosition', _context) == "default") %}
          <div class="name"><a href="{{ product.href }}" title="{{ product.name }}">{{ product.name }}</a></div>
        {% endif %}

        {% if product.description and product.description != '..' %}
        <div class="description">{{ product.description }}</div>
        {% endif %}

        {% if product.price %}
          <div class="price">
            {% if product.labels.price %}
              <span class="product-labels-price">
                {% for id, label in product.labels.price %}
                  <span class="product-label product-label-{{ id }} product-label-{{ label.display }} {{ journal3.classes(label.classes) }}"><strong>{{ label.label }}</strong></span>
                {% endfor %}
              </span>
            {% endif %}
            <div>
              {% if product.special %}
                <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
              {% else %}
                <span class="price-normal">{{ product.price }}</span>
              {% endif %}
            </div>
            {% if product.tax %}
              <span class="price-tax">{{ text_tax }}{{ product.tax }}</span>
            {% endif %}
          </div>
        {% endif %}

        {% if product.rating %}
          <div class="rating {% if (journal3.getIn(prefix ~ 'RatingPosition', _context) == "hover") %}rating-hover{% endif %}">
            <div class="rating-stars">
              {% for i in 1..5 %}
                {% if product.rating < i %}
                  <span class="fa fa-stack"><em class="fa fa-star-o fa-stack-2x"></em></span>
                {% else %}
                  <span class="fa fa-stack"><em class="fa fa-star fa-stack-2x"></em><em class="fa fa-star-o fa-stack-2x"></em></span>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        {% else %}
          <div class="rating no-rating {% if (journal3.getIn(prefix ~ 'RatingPosition', _context) == "hover") %}rating-hover{% endif %}">
            <div class="rating-stars">
              {% for i in 1..5 %}
                {% if product.rating < i %}
                  <span class="fa fa-stack"><em class="fa fa-star-o fa-stack-2x"></em></span>
                {% else %}
                  <span class="fa fa-stack"><em class="fa fa-star fa-stack-2x"></em><em class="fa fa-star-o fa-stack-2x"></em></span>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        {% endif %}

        {% if journal3.get('catalogCartStatus') or journal3.get('catalogWishlistStatus') or journal3.get('catalogCompareStatus') %}
        <div class="buttons-wrapper">
          <div class="button-group">
            {% if journal3.get('catalogCartStatus') %}
            <div class="cart-group">
              <div class="stepper">
                <label class="sr-only" for="{{ product.qid }}">{{ product.name }}</label>
                <button aria-label="-" class="fa fa-angle-down"></button>
                <input id="{{ product.qid }}" type="text" name="quantity" value="{{ product.minimum }}" data-minimum="{{ product.minimum }}" class="form-control"/>
                <input type="hidden" name="product_id" value="{{ product.product_id }}"/>
                <button aria-label="+" class="fa fa-angle-up"></button>
              </div>
              <a class="btn btn-cart" role="button" aria-label="{{ product.button_cart }}" {% if journal3.is_desktop and (journal3.getIn(prefix ~ 'CartDisplay', _context) == "icon") and (journal3.getIn(prefix ~ 'CartTooltipStatus', _context)) %} data-toggle="tooltip-hover" data-tooltip-class="{{ module_id ? 'module-products-' ~ module_id ~ ' module-products-grid' : 'product-grid' }} cart-tooltip" data-placement="{{ journal3.getIn(prefix ~ 'CartTooltipPosition', _context) }}" title="{{ product.button_cart }}" {% endif %} onclick="cart.add('{{ product.product_id }}', $(this).closest('.product-thumb').find('.button-group input[name=\'quantity\']').val());" data-loading-text="<span class='btn-text'>{{ product.button_cart }}</span>"><span class="btn-text">{{ product.button_cart }}</span></a>
            </div>
            {% endif %}

            {% if journal3.get('catalogWishlistStatus') or journal3.get('catalogCompareStatus') %}
            <div class="wish-group">
              {% if journal3.get('catalogWishlistStatus') %}
              <a class="btn btn-wishlist" role="button" aria-label="{{ button_wishlist }}" {% if journal3.is_desktop and (journal3.getIn(prefix ~ 'WishlistDisplay', _context) == "icon") and (journal3.getIn(prefix ~ 'WishlistTooltipStatus', _context)) %} data-toggle="tooltip-hover" data-tooltip-class="{{ module_id ? 'module-products-' ~ module_id ~ ' module-products-grid' : 'product-grid' }} wishlist-tooltip" data-placement="{{ journal3.getIn(prefix ~ 'WishlistTooltipPosition', _context) }}" title="{{ button_wishlist }}" {% endif %} onclick="wishlist.add('{{ product.product_id }}')"><span class="btn-text">{{ button_wishlist }}</span></a>
              {% endif %}

              {% if journal3.get('catalogCompareStatus') %}
              <a class="btn btn-compare" role="button" aria-label="{{ button_compare }}" {% if journal3.is_desktop and (journal3.getIn(prefix ~ 'CompareDisplay', _context) == "icon") and (journal3.getIn(prefix ~ 'CompareTooltipStatus', _context)) %} data-toggle="tooltip-hover" data-tooltip-class="{{ module_id ? 'module-products-' ~ module_id ~ ' module-products-grid' : 'product-grid' }} compare-tooltip" data-placement="{{ journal3.getIn(prefix ~ 'CompareTooltipPosition', _context) }}" title="{{ button_compare }}" {% endif %} onclick="compare.add('{{ product.product_id }}')"><span class="btn-text">{{ button_compare }}</span></a>
              {% endif %}
            </div>
            {% endif %}
          </div>
        </div>
        {% endif %}

        {% if product.extra_buttons %}
          <div class="extra-group">
            <div>
              {% for id, extra_button in product.extra_buttons %}
                <a class="btn btn-extra btn-extra-{{ id }}"
                  {% if journal3.is_desktop and (journal3.getIn(prefix ~ 'ExtraButtonDisplay' ~ loop.index, _context) == "icon") and (journal3.getIn(prefix ~ 'ExtraButtonTooltipStatus', _context)) %} data-toggle="tooltip-hover" data-tooltip-class="{{ module_id ? 'module-products-' ~ module_id ~ ' module-products-grid' : 'product-grid' }} extra-tooltip" data-placement="{{ journal3.getIn(prefix ~ 'ExtraButtonTooltipPosition', _context) }}" title="{{ extra_button.label }}" {% endif %}
                  {% if extra_button.action == 'quickbuy' %}onclick="cart.add('{{ product.product_id }}', $(this).closest('.product-thumb').find('.button-group input[name=\'quantity\']').val(), true);"{% endif %}
                  {% if extra_button.action == 'link' and extra_button.link.href %}href="{{ extra_button.link.href }}" {{ journal3.linkAttrs(extra_button.link) }} data-product_id="{{ product.product_id }}" data-product_url="{{ product.href }}" {% else %}href="javascript:;"{% endif %}
                   data-loading-text="<span class='btn-text'>{{ extra_button.label }}</span>">
                  <span class="btn-text">{{ extra_button.label }}</span>
                </a>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
