{%- liquid
  assign crop = crop | default: settings.product_tiles_aspect_ratio
  assign shape = shape | default: settings.product_tile_media_shape
  assign hover_image = blank
  if settings.product_tiles_second_image_on_hover and product.media.size > 1
    assign hover_image = product.media[1]
  endif
  if enable_quick_buy
    assign product_form_id = 'product-form-' | append: section.id | append: '-' | append: product.id
    assign current_variant = product.selected_or_first_available_variant
    assign featured_media = current_variant.featured_media | default: product.featured_media
  endif
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999


  assign current_variant_price = current_variant.price
  assign current_variant_compare_at_price = current_variant_compare_at_price

  assign product_price = product.price
  assign product_compare_at_price_max = product.compare_at_price_max
  
  comment
    start Yagi app code
  endcomment
  assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
  if product_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank
    assign product_compare_at_price_max = product.price_max
  endif


  assign current_variant_price = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price

  if current_variant_price < current_variant.price and current_variant_compare_at_price == empty
    assign current_variant_compare_at_price = current_variant.price
  endif

  if use_variant
    assign price = target.metafields.app--168074346497.auto_discounted_price.value | default: target.price

    if target.metafields.app--168074346497.discount_type.value != nil and target.metafields.app--168074346497.discount_type.value != "fixed" and product.metafields.app--168074346497.discount_percentage.value > 0.01
      assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value

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

      assign price = target.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil

      assign compare_at_price = target.price

      if target.compare_at_price > compare_at_price
        assign compare_at_price = target.compare_at_price
      endif
    endif
    
    if price < target.price and compare_at_price == blank
      assign compare_at_price = target.price
    endif
  else
    assign 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 price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil

      assign compare_at_price = product.price

      if product.compare_at_price > compare_at_price
        assign compare_at_price = product.compare_at_price
      endif
    endif
    
    if price < product.price and compare_at_price == blank
      assign compare_at_price = product.price
    endif
  endif

  comment
    end Yagi app code
  endcomment

  if compare_at_price > price
    assign on_sale = true
  else
    assign on_sale = false
  endif
  assign available = target.available | default: false
  assign money_price = price | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = money_price | append: '+'
  endif

  if odd_even == 'odd'
    assign rotate = 5
  else
    assign rotate = -5
  endif

  unless loading
    assign loading = 'lazy'
  endunless

  unless preload
    assign preload = false
  endunless

  unless sizes
    assign sizes = '100vw'
  endunless
-%}
{%- if product and product != empty -%}
  <div
    class="product-tile relative {{ class }} {% if display_on_card %}text-scheme-text card{% endif %}"
  >
    {% if enable_quick_buy %}
      {% assign yagi_discount_percentage = '"discount_percentage": 0,"id"' %}
      {% if product.metafields.app--168074346497.discount_percentage.value > 0.01 %}
      {% capture yagi_discount_percentage %}"discount_percentage": {{ product.metafields.app--168074346497.discount_percentage.value }},"id"{% endcapture %}
      {% endif %}


      <!-- yagi data island -->
      <data-island
        class="contents"
        x-data="
          QuickBuy({
            product: {{ product | json | replace: '"id"', yagi_discount_percentage | escape }},
            variant: {{ current_variant | json | escape }},
            featuredMediaID: {{ featured_media.id | json }}
          })
        "
        src="{{ 'island-quick-buy.bundle.js' | asset_url }}"
        data-product-root="{{ section.id }}-{{ product.id }}"
      >
    {% endif %}
    <div
      class="product-tile__container {% if display_on_card %}bg-scheme-card card__surface {% if products_per_row_mobile == '2' %}p-2.5 lg:p-5{% else %}p-5{% endif %} h-full{% endif %}"
    >
      {%- if product.featured_media -%}
        <a
          href="{{ product.url | within: collection }}"
          class="product-tile__featured-media group block"
        >
          <div class="product-media-object relative {% unless display_on_card %}{% if settings.media_shadow_direction contains 'top' %}pt-media-shadow{% else %}pb-media-shadow{% endif %}{% endunless %}">
            {%- render 'product-tile-media-image',
              media: product.featured_media,
              shape_id: shape_id,
              shape: shape,
              is_card: display_on_card,
              crop: crop,
              hover_image: hover_image,
              container_id: section.id,
              quick_buy: enable_quick_buy,
              product: product,
              index: index,
              preload: preload,
              loading: loading,
              sizes: sizes,
              will_transform: will_transform
            -%}
          </div>
        </a>
      {%- endif -%}
      <div class="product-tile mt-5 break-words {{ settings.product_tile_text_align }}">
        <a
          href="{{ product.url | within: collection }}"
          class="block h-full w-full"
        >
          <h3 class="font-body text-base">{{ product.title | escape }}</h3>
          {%- if settings.product_tiles_show_vendor -%}
            <p class="mt-1">{{ product.vendor }}</p>
          {%- endif -%}

          {%- liquid
            assign metafield_namespace = settings.product_tiles_metafield_content | split: '.' | first
            assign metafield_key = settings.product_tiles_metafield_content | split: '.' | last
            assign metafield = product.metafields[metafield_namespace][metafield_key]
          -%}
          {% if metafield != blank %}
            <p class="mt-2.5 text-scheme-text">
              {{ metafield.value }}
            </p>
          {% endif %}

          {%- if enable_quick_buy -%}
            <span
              class="mt-2.5 inline-block"
              x-html="formatMoney(currentPrice * (1.0 - product.discount_percentage))"
              :class="
                {
                  'invisible': !currentVariant
                }
              "
              data-product-price
            >
              {{ current_variant_price | money }}
            </span>
            {% if product_compare_at_price_max > product_price %}
              <span x-show="product.discount_percentage > 0.1 || (currentVariant && product.compare_at_price_max && currentVariant.compare_at_price > currentVariant.price)">
                <span class="{{ price_text_size }}">
                  <span class="sr-only">
                    {{- 'products.general.sale_price' | t -}}
                  </span>
                  <s
                    data-compare-price
                    class="text-scheme-text"
                    x-html="formatMoney(currentVariant.compare_at_price)"
                  >
                    {% if current_variant_compare_at_price
                        > current_variant_price
                    %}
                      {{ current_variant_compare_at_price | money }}
                    {% endif %}
                  </s>
                </span>
              </span>
            {% endif %}
          {%- else -%}
            {%- render 'price',
              product: product,
              price_class: 'mt-2.5',
              compare_at_price: compare_at_price,
              price: price,
              money_price: money_price,
              on_sale: on_sale
            -%}
          {%- endif -%}
        </a>
      </div>
      {%- if enable_quick_buy -%}
        <div class="product-tile__quick-buy">
          {%- render 'product-tile-quick-buy',
            section: section,
            product: product,
            product_form_id: product_form_id,
            current_variant: current_variant,
            current_variant_only: product.has_only_default_variant,
            is_card: display_on_card
          -%}
        </div>
      {%- endif -%}
      
      {% comment %}
        start Yagi app code
      {% endcomment %}
      {% if true or settings.show_save_percentage_badge %}
      {%- if compare_at_price > price or product.metafields.app--168074346497.min_auto_discounted_price.value > 1 -%}
        {% assign sale_text = "Save [percentage]%" %}

        {% if product.metafields.app--168074346497.discount_percentage.value > 0.005 %}
          {% assign percentage = product.metafields.app--168074346497.discount_percentage.value | times: 100 | floor %}

          <!-- discount percentage raw value is {{ percentage }} , {{ sale_text }} -->
          {% assign text = sale_text | replace: "[percentage]", percentage | replace: ".0", "" %}
        {% elsif compare_at_price > price %}
          {% assign tmp_percentage = price | times: 1.0 | divided_by: compare_at_price | times: 100 | floor %}
          {% assign percentage = 100.0 | minus: tmp_percentage | floor %}
          {% assign text = sale_text | replace: "[percentage]", percentage | replace: ".0", "" %}
        {% endif %}
        
        {%- liquid
          
          assign id = 'yagi-sticker-' | append: product.id
          assign shape = settings.on_sale_badge_shape
          assign vertical_position = 15
          assign horizontal_position = 90
          if rotate > 0
            assign rotate = -5
          else
            assign rotate = 5
          endif
          if display_on_card
            assign vertical_position = 5
          endif
          if scatter_position
            assign vertical_position = vertical_position | plus: 15
          endif
        -%}
        {% if text != 'Save [percentage]%' %}
          {%- render 'static-sticker',
            static_id: 'automatic-discounted',
            shape: shape,
            id: id,
            text: text,
            vertical_position: vertical_position,
            horizontal_position: horizontal_position,
            rotate: rotate,
            width: 100,
            font_size: settings.badge_font_size,
            color: 'bg-scheme-accent-2 text-scheme-accent-2-contrast',
            will_transform: will_transform
          %}
        {% endif %}
      {%- endif -%}
      {% endif %}
      {% comment %}
        end Yagi app code
      {% endcomment %}
      {%- if settings.show_on_sale_badge and on_sale -%}
        {%- liquid
          assign text = 'products.product.on_sale' | t
          assign id = 'on-sale-sticker-' | append: product.id
          assign shape = settings.on_sale_badge_shape
          assign vertical_position = 15
          assign horizontal_position = 90
          if rotate > 0
            assign rotate = -5
          else
            assign rotate = 5
          endif
          if display_on_card
            assign vertical_position = 5
          endif
          if scatter_position
            assign vertical_position = vertical_position | plus: 15
          endif
        -%}
        {%- render 'static-sticker',
          static_id: 'on-sale',
          shape: shape,
          id: id,
          text: text,
          vertical_position: vertical_position,
          horizontal_position: horizontal_position,
          rotate: rotate,
          width: 100,
          font_size: settings.badge_font_size,
          color: 'bg-scheme-accent-1 text-scheme-accent-1-contrast',
          will_transform: will_transform
        %}
      {%- endif -%}
      {%- if settings.show_sold_out_badge and available == false -%}
        {%- liquid
          assign text = 'products.product.sold_out' | t
          assign id = 'sold-out-sticker-' | append: product.id
          assign vertical_position = 15
          assign horizontal_position = 10
          if rotate > 0
            assign rotate = -5
          else
            assign rotate = 5
          endif
          if display_on_card
            assign vertical_position = 5
          endif
          if scatter_position
            assign vertical_position = vertical_position | plus: 15
          endif
        -%}
        {%- render 'static-sticker',
          static_id: 'sold-out',
          id: id,
          text: text,
          vertical_position: vertical_position,
          horizontal_position: horizontal_position,
          rotate: rotate,
          width: 100,
          font_size: settings.badge_font_size,
          color: 'bg-scheme-text text-scheme-text-contrast',
          will_transform: will_transform
        %}
      {%- endif -%}
      {%- liquid
        assign metafield_namespace = settings.product_tile_metafield_badge | split: '.' | first
        assign metafield_key = settings.product_tile_metafield_badge | split: '.' | last
        assign metafield_badge = product.metafields[metafield_namespace][metafield_key]
      -%}
      {% if metafield_badge != blank %}
        {%- liquid
          assign text = metafield_badge.value
          assign id = 'metafield-sticker-' | append: product.id
          assign shape = settings.metafield_badge_shape
          assign vertical_position = 15
          if display_on_card
            assign vertical_position = 5
          endif
          if on_sale and available
            assign horizontal_position = 10
          else
            assign horizontal_position = 90
          endif
          if on_sale and sold_out
            if display_on_card
              assign vertical_position = 30
            else
              assign vertical_position = 40
            endif
          endif
          if rotate > 0
            assign rotate = -5
          else
            assign rotate = 5
          endif
          if scatter_position
            assign vertical_position = vertical_position | plus: 15
          endif
        -%}
        {%- render 'static-sticker',
          static_id: 'metafield-badge',
          id: id,
          text: text,
          vertical_position: vertical_position,
          horizontal_position: horizontal_position,
          rotate: rotate,
          width: 100,
          font_size: settings.badge_font_size,
          color: 'bg-scheme-accent-1 text-scheme-accent-1-contrast',
          will_transform: will_transform
        %}
      {% endif %}
    </div>
    {% if enable_quick_buy %}
      </data-island>
    {% endif %}
  </div>
{%- else -%}
  <div class="product-tile {{ class }} {% if display_on_card %}text-scheme-text card{% endif %}">
    <div class="{% if display_on_card %}bg-scheme-card card__surface p-5 h-full{% endif %}">
      <div class="relative {% unless display_on_card %}{% if settings.media_shadow_direction contains 'top' %}pt-media-shadow{% else %}pb-media-shadow{% endif %}{% endunless %}">
        {%- render 'media-image-placeholder',
          shape_id: shape_id,
          container_id: section.id,
          index: index,
          shape: shape,
          crop: crop,
          is_card: section.settings.display_on_card
        -%}
      </div>
      <div class="product-tile mt-5 text-center">
        <h3 class="font-body text-base">
          {{ 'sections.onboarding.product_title' | t }}
        </h3>
        {% render 'price', price_class: 'mt-2' %}
      </div>
    </div>
  </div>
{%- endif -%}