{% comment %}
  It's best to load images as JPG instead of PNG for faster
  loading, so that is our default. If you upload
  PNG files and want to keep them that way, set the line
  below to false.
{% endcomment %}
{%- liquid

  unless grid_item_width
    assign grid_item_width = 'medium-up--one-quarter small--one-half'
  endunless
-%}

{% liquid
# start Yagi app code
assign active_discount = true

assign empty_array = "" | split: ""
assign dormant_discounts = shop.metafields.app--168074346497.dormant_discounts.value | default: empty_array
assign target_discount_id = product.metafields.app--168074346497.applied_discount_id.value
for dormant_discount in dormant_discounts
  if dormant_discount == target_discount_id
    assign active_discount = false
  endif
endfor

assign product_price = product.price
assign product_compare_at_price = product.compare_at_price

if active_discount
  assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price

  if product.metafields.app--168074346497.discount_percentage.value > 0.01
    assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value

    assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil

    assign product_compare_at_price = product.price

    if product.compare_at_price > product_compare_at_price
      assign product_compare_at_price = product.compare_at_price
    endif
  endif

  if product_price < product.price and product_compare_at_price == blank
    assign product_compare_at_price = product.price
  endif
endif

# end Yagi app code
%}

{% comment %}
  Do not output the quick shop modal if we're loading related products
  through another quick shop modal. Determined by checking the product.ajax template suffix.
  These are loaded for product.sections templates but quickly removed
  in JS before appending the related section.
{% endcomment %}
{%- liquid
  assign enable_quick_shop = settings.quick_shop_enable
  if no_modal
    assign enable_quick_shop = false
  endif
  if template == 'product.ajax'
    assign enable_quick_shop = false
  endif

  assign on_sale = false
  if product_compare_at_price > product_price
    assign on_sale = true
  endif

  assign sold_out = true
  if product.available
    assign sold_out = false
  endif

  assign product_tags = product.tags | join: ','
  assign has_custom_label = false
  if product.metafields.theme.label and product.metafields.theme.label != blank
    assign has_custom_label = true
    assign custom_label = product.metafields.theme.label.value
  elsif product_tags contains '_label_'
    for tag in product.tags
      if tag contains '_label_'
        assign tag_starts_with = tag | slice: 0
        if tag_starts_with == '_'
          assign has_custom_label = true
          assign custom_label = tag | replace: '_label_', ''
        endif
      endif
    endfor
  endif
-%}

<div
  class="grid__item grid-product {{ grid_item_width }}{% if settings.product_hover_details %} grid-product__hover-details{% endif %}"
  data-aos
  data-product-grid
  data-id="{{ product.id }}">
  <div class="grid-product__content">
    {%- if has_custom_label -%}
      <div class="grid-product__tag grid-product__tag--custom">
        {{ custom_label }}
      </div>
    {%- else -%}
      {%- if sold_out -%}
        <div class="grid-product__tag grid-product__tag--sold-out">
          {{ 'products.product.sold_out' | t }}
        </div>
      {%- endif -%}
      {%- if on_sale and sold_out == false -%}
        <div class="grid-product__tag grid-product__tag--sale">
          {%- if settings.product_save_amount -%}
            {%- if settings.product_save_type == 'dollar' -%}
              {%- capture saved_amount -%}{{ product_compare_at_price | minus: product_price | money }}{%- endcapture -%}
            {%- else -%}
              {%- capture saved_amount -%}{{ product_compare_at_price | minus: product_price | times: 100.0 | divided_by: product_compare_at_price | round }}%{%- endcapture -%}
            {%- endif -%}
            {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
          {%- else -%}
            {{ 'products.general.sale' | t }}
          {%- endif -%}
        </div>
      {%- endif -%}
    {%- endif -%}

    {%- liquid
      assign fixed_aspect_ratio = false
      unless settings.product_grid_image_size == 'natural'
        assign fixed_aspect_ratio = true
      endunless

      assign preview_image = product.featured_media.preview_image

      assign image_limit = 1
      assign image_count = 0
      if settings.product_hover_image
        assign image_limit = 10
      endif

      assign slider_image_padding = '100%'

      if image_style == 'circle'
        assign fixed_aspect_ratio = true
        assign imageRatio = 'square'
      endif
    -%}

    <a
      href="{{ product.url | within: collection }}"
      class="grid-product__link{% if sold_out %} grid-product__link--disabled{% endif %}{% if enable_quick_shop %} quick-product__btn js-screen-open-product-{{ product.id }} js-no-transition{% endif %}"
      data-product-id="{{ product.id }}"
      data-url="{{ product.url | within: collection }}">
      <div id="ProductGridSlider-{{ product.id }}"
        class="slideshow-wrapper product-slider"
        data-image-count="{{ product.media.size }}"
        data-id="{{ product.id }}">
        {%- for media in product.media limit: image_limit -%}
          {%- assign image_count = image_count | plus: 1 -%}
          <div class="product-slide">
            <div class="image-wrap {% if image_style == 'circle' %}image-wrap--circular-image{% endif %}">
              {% capture img_class %}{%- if fixed_aspect_ratio -%}grid-product__image{% endif %} image-style--{{ image_style }}{% endcapture %}
              {%- if forloop.first -%}
                {%- if fixed_aspect_ratio -%}
                  <div
                    class="grid__image-ratio grid__image-ratio--{% if image_style == 'circle' %}square{% else %}{{ settings.product_grid_image_size }}{% endif %}"
                  >
                    {%- render 'image-element',
                      img: preview_image,
                      classes: img_class,
                      sizes: sizes,
                      sizeVariable: sizeVariable,
                      fallback: fallback,
                    -%}
                  </div>
                {%- else -%}
                  {%- assign slider_image_padding = 100 | divided_by: preview_image.aspect_ratio | append: '%' -%}
                  <div class="image-wrap"
                    style="height: 0; padding-bottom: {{ slider_image_padding }};"
                    >
                    {%- render 'image-element',
                      img: preview_image,
                      classes: img_class,
                      sizes: sizes,
                      sizeVariable: sizeVariable,
                      fallback: fallback,
                      widths: '750, 900, 1080',
                      format: format,
                    -%}
                  </div>
                {%- endif -%}
              {%- else -%}
                <div
                  class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}"
                  {% if settings.product_grid_image_size == 'natural' %}
                    style="padding-bottom: {{ slider_image_padding }}"
                  {% endif %}
                >
                  {%- render 'image-element',
                    img: media.preview_image,
                    classes: img_class,
                    sizes: sizes,
                    sizeVariable: sizeVariable,
                    fallback: fallback,
                  -%}
                </div>
              {%- endif -%}
            </div>
          </div>
        {%- endfor -%}
        {%- if product.media == blank -%}
          <div
            class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}"
            {% if settings.product_grid_image_size == 'natural' %}
              style="padding-bottom: {{ slider_image_padding }}"
            {% endif %}
          >
            {%- capture placeholder -%}product-{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
            <div class="product-image--placeholder">{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}</div>
          </div>
        {%- endif -%}
      </div>

      {%- if image_count > 1 -%}
        {%- assign loader_duration = 1350 | times: image_count -%}
        <style>
          .product-slider.flickity-enabled[data-id="{{ product.id }}"]:after {
            animation-duration: {{ loader_duration }}ms;
          }
        </style>
      {%- endif -%}

      <div class="grid-product__meta">
        <div class="grid-product__title">{{ product.title }}</div>
        {%- if settings.vendor_enable -%}
          <div class="grid-product__vendor">{{ product.vendor }}</div>
        {%- endif -%}
        <div class="grid-product__price">
          {%- if on_sale -%}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <del class="grid-product__price--original">{{ product_compare_at_price | money }}</del>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {%- endif -%}
          {%- if product.price_varies -%}
            {%- assign price = product_price | money -%}
            <span{% if on_sale %} class="sale-price"{% endif %}>
              {{ 'products.general.from_text_html' | t: price: price }}
            </span>
          {%- else -%}
            <span{% if on_sale %} class="sale-price"{% endif %}>
              {{ product_price  | money }}
            </span>
          {%- endif -%}
        </div>

        {%- assign product_variant = product.selected_or_first_available_variant -%}
        {%- if product_variant.unit_price_measurement -%}
          <div class="product__unit-price">
            {%- capture unit_price_base_unit -%}
              {%- if product_variant.unit_price_measurement -%}
                {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
                  {{ product_variant.unit_price_measurement.reference_value }}
                {%- endif -%}
                {{ product_variant.unit_price_measurement.reference_unit }}
              {%- endif -%}
            {%- endcapture -%}

            {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
          </div>
        {%- endif -%}

        {%- if settings.enable_swatches and type == 'horizontal' -%}
          {%- render 'product-grid-item-swatches', product: product -%}
        {%- endif -%}
      </div>

      {%- if settings.enable_swatches and type == blank -%}
        {%- render 'product-grid-item-swatches', product: product -%}
      {%- endif -%}
    </a>
  </div>

  {%- if enable_quick_shop and type == blank -%}
    {%- render 'quick-shop-modal', product: product -%}
  {%- endif -%}
</div>