{% comment %}
    Renders a product card

    Accepts:
    - product_card_product: {Object} Product Liquid object (optional)
    - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - add_image_padding: {Boolean} Enables padding on the image to space out the grid
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_description: {Boolean} Show the product description. Default: false
    - show_image_outline: {Boolean} Show card outline. Default: true (optional)
    - show_rating: {Boolean} Show the product rating. Default: false

    Usage:
    {% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign variant_images = product_card_product.images | where: 'attached_to_variant?', true | map: 'src'
  assign color_find = product_card_product.options_with_values | where: 'name', 'Color' | first
  if color_find.name != blank
    assign color_size = color_find.values.size
    assign color_pluralize = false
    if color_size > 1
      assign color_pluralize = true
    endif
    assign color_option = 'option' | append: color_find.position
    for variant in product_card_product.variants
      if color_used contains variant[color_option]
        continue
      endif
      if color_used != blank
        assign spacer = '::'
      endif
      for image in product_card_product.images
        if image.alt contains 'MQNSDE'
          assign mqnside = image
        endif
        unless image.alt contains variant[color_option] and image.alt contains 'MQNSDE' and variant.featured_image
          continue
        endunless
        assign color_used = color_used | join: '::' | append: spacer | append: variant[color_option] | split: '::'
        assign variant_image = image | img_url: '533x'
        assign variant_featured = variant.featured_image | img_url: '533x'
        assign variant_info = variant_info | join: '::' | append: spacer | append: variant_image | append: '\\' | append: image.width | append: '\\' | append: image.height | append: '\\' | append: variant.id | append: '\\' | append: variant[color_option] | append: '\\' | append: variant_featured | split: '::'
      endfor
    endfor
  endif
-%}

{% for variant_single in variant_info %}
{%- assign variant_image = variant_single | split: '\\' -%}
{%- assign image_width = variant_image[1] | times: 1 -%}
{%- assign image_height = variant_image[2] | times: 1 -%}
<li class="grid__item">

<div class="card-wrapper">
  <a{% if variant_info != blank %} is="card-switcher"{% endif %} href="{{ product_card_product.url | default: '#'| within: collection }}?variant={{ variant_image[3] }}" class="full-unstyled-link card-link">
    <span class="visually-hidden">{{ product_card_product.title | escape }}</span>

    {%- liquid
      assign featured_media = product_card_product.selected_or_first_available_variant.featured_media
      for tag in product_card_product.tag
        if tag contains 'flag-'
          assign flags = flags | join: '||'
          capture flags
            echo flags
            if flags != blank
              echo '||'
            endif
            echo tag
          endcapture
          assign flags = flags | split: '||'
        endif
      endfor
    -%}
    {%  if show_varimg %}
      {%  assign featured_media = mqnside %}
    {% endif %}
    <div class="card card--product{% if featured_media == nil %} card--text-only card--soft{% endif %}{% if featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
      <div class="card__inner">
        {%- if featured_media -%}
          {%- liquid
            assign featured_media_aspect_ratio = featured_media.aspect_ratio

            if featured_media.aspect_ratio == nil
              assign featured_media_aspect_ratio = 1
            endif
          -%}

          <div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
            <div class="media media--transparent media--{{ media_size }} media--hover-effect"
              {% if media_size == 'adapt' and featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
            >
              {%- if flags != blank -%}
                <div class="card--flags">
                  {%- for flag in flags -%}
                  <div class="card--flag">
                    {{ flag | replace: 'flag-' }}
                  </div>
                  {%- endfor -%}
                </div>
              {%- endif -%}
              <img
                srcset="{%- if image_width >= 165 -%}{{ variant_image[0] | replace: '533x', '165x'}} 165w,{%- endif -%}
                  {%- if image_width >= 360 -%}{{ variant_image[0] | replace: '533x', '360x' }} 360w,{%- endif -%}
                  {%- if image_width >= 533 -%}{{ variant_image[0] | replace: '533x', '533x'}} 533w,{%- endif -%}
                  {%- if image_width >= 720 -%}{{ variant_image[0]| replace: '533x', '720x' }} 720w,{%- endif -%}
                  {%- if image_width >= 940 -%}{{ variant_image[0] | replace: '533x', '940x' }} 940w,{%- endif -%}
                  {%- if image_width >= 1066 -%}{{ variant_image[0] | replace: '533x', '1066x' }} 1066w{%- endif -%}"
                src="{{ variant_image[0] | replace: '533x', '533x' }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ variant_image[0].alt | escape }}"
                loading="lazy"
                class="motion-reduce card-mainimg"
                width="{{ image_width }}"
                height="{{ image_height }}"
              >
            </div>
          </div>
        {%- else -%}
          <div class="card__content"><h2 class="card__text h3">{{ product_card_product.title }}</h2></div>
        {%- endif -%}

        <div class="card__badge">
          {%- if product_card_product.available == false -%}
            <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">{{ 'products.product.sold_out' | t }}</span>
          {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
            <span class="badge badge--bottom-left {% if settings.enable_custom_sale_badge_colors %} custom-sale-badge {% else %}color-{{ settings.sale_badge_color_scheme }}{% endif %}" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
          {%- endif -%}
        </div>
      </div>
    </div>

    <div class="card-information">
      <div class="card-information__wrapper">
        <div class="information__variant-wrapper d-flex justify-content-between">

          <div class="information__variant-main">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
            {%- endif -%}



            {%- if featured_media -%}
              <span class="card-information__text h2">
                {{ product_card_product.title |remove:product_card_product.type | escape }}
              </span>
            {%- endif -%}

            {%- if show_description -%}
              <div class="caption-with-letter-spacing light">{{ product_card_product.metafields.description.short }}</div>
            {%- endif -%}

            <span class="card-information__color">
              {{ variant_image[4] }}
            </span>
          </div>

          <div class="information__variant-price">
            {% render 'price',
              product: product_card_product,
              price_class: '',
              pro: pro,
              level_check: level_check
            %}
          </div>
        </div>

        {% comment %} TODO: metafield {% endcomment %}
        <span class="caption-large light">{{ block.settings.description | escape }}</span>
        {%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
          {% liquid
            assign rating_decimal = 0
            assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
            if decimal >= 0.3 and decimal <= 0.7
              assign rating_decimal = 0.5
            elsif decimal > 0.7
              assign rating_decimal = 1
            endif
          %}
          <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
            <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
          </div>
          <p class="rating-text caption">
            <span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
          </p>
          <p class="rating-count caption">
            <span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
            <span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
          </p>
        {%- endif -%}
        {%- if show_cta -%}
        <span class="button1 button button--primary" aria-disabled="true">Shop Now</span>
        {%- endif -%}
      </div>
    </div>
  </a>
</div>
</li>
{% endfor %}