{% 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 featured_media = product_card_product.selected_or_first_available_variant.featured_media
  assign featured_media_color = featured_media.alt | split: '|' | first | strip
  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
      assign variant_info_hover_alternate = blank
      assign variant_info_hover_alternate_alternate = blank
      if color_used != blank
        assign spacer = '::'
      endif
      if color_used_hover != blank
        assign spacer_hover = '::'
      endif
      for image in product_card_product.images
        assign image_media_color = image.alt | split: '|' | first | strip
        if image.alt contains 'MQNSDE'
          assign mqnside = image
        endif
        unless color_used_hover contains variant[color_option]
          if image.alt contains '4 / MODSDE' and image_media_color == variant[color_option]
            assign variant_info_hover_alternate_alternate = image
            if image_media_color == featured_media_color
              assign featured_media_hover = image
            endif
          endif
          if image.alt contains '6 / MODSDE' and image_media_color == variant[color_option]
            assign variant_info_hover_alternate = image
            if image_media_color == featured_media_color
              assign featured_media_hover = image
            endif
          endif
          if image.alt contains 'MODMERCH'
            if image_media_color == featured_media_color
              assign featured_media_hover = image
            endif
            if image_media_color == variant[color_option]
              assign variant_image_hover = image | img_url: '533x'
              assign variant_info_hover = variant_info_hover | join: '::' | append: spacer_hover | append: variant_image_hover | append: '\\' | append: image.width | append: '\\' | append: image.height | split: '::'
              assign color_used_hover = color_used_hover | join: '::' | append: spacer_hover | append: variant[color_option] | split: '::'
            endif
          endif
          if forloop.last
            unless color_used_hover contains variant[color_option]
              assign alt_image = variant_info_hover_alternate_alternate
              if variant_info_hover_alternate != blank
                assign alt_image = variant_info_hover_alternate
              endif
              if alt_image != blank
                assign variant_image_hover = alt_image | img_url: '533x'
                assign variant_info_hover = variant_info_hover | join: '::' | append: spacer_hover | append: variant_image_hover | append: '\\' | append: alt_image.width | append: '\\' | append: alt_image.height | split: '::'
                assign color_used_hover = color_used_hover | join: '::' | append: spacer_hover | append: variant[color_option] | split: '::'
              endif
            endunless
          endif
        endunless
        unless color_used contains variant[color_option]
          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: '::'
        endunless
      endfor
    endfor
  endif
-%}

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

    {%- liquid
      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 featured_media.width >= 165 -%}{{ featured_media | img_url: '165x' }} 165w,{%- endif -%}
                  {%- if featured_media.width >= 360 -%}{{ featured_media | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if featured_media.width >= 533 -%}{{ featured_media | img_url: '533x' }} 533w,{%- endif -%}
                  {%- if featured_media.width >= 720 -%}{{ featured_media | img_url: '720x' }} 720w,{%- endif -%}
                  {%- if featured_media.width >= 940 -%}{{ featured_media | img_url: '940x' }} 940w,{%- endif -%}
                  {%- if featured_media.width >= 1066 -%}{{ featured_media | img_url: '1066x' }} 1066w{%- endif -%}"
                src="{{ featured_media | img_url: '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="{{ featured_media.alt | escape }}"
                loading="lazy"
                class="motion-reduce card-mainimg"
                width="{{ featured_media.width }}"
                height="{{ featured_media.height }}"
              >

              {%- if featured_media_hover != nil and show_secondary_image -%}
                <img
                  srcset="{%- if featured_media_hover.width >= 165 -%}{{ featured_media_hover | img_url: '165x' }} 165w,{%- endif -%}
                    {%- if featured_media_hover.width >= 360 -%}{{ featured_media_hover | img_url: '360x' }} 360w,{%- endif -%}
                    {%- if featured_media_hover.width >= 533 -%}{{ featured_media_hover | img_url: '533x' }} 533w,{%- endif -%}
                    {%- if featured_media_hover.width >= 720 -%}{{ featured_media_hover | img_url: '720x' }} 720w,{%- endif -%}
                    {%- if featured_media_hover.width >= 940 -%}{{ featured_media_hover | img_url: '940x' }} 940w,{%- endif -%}
                    {%- if featured_media_hover.width >= 1066 -%}{{ featured_media_hover | img_url: '1066x' }} 1066w{%- endif -%}"
                  src="{{ featured_media_hover | img_url: '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="{{ featured_media_hover.alt | escape }}"
                  loading="lazy"
                  class="motion-reduce card-hoverimg"
                width="{{ featured_media_hover.width }}"
                height="{{ featured_media_hover.height }}"
                >
              {%- endif -%}
            </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">
              {%- if color_size != blank -%}{%- if color_pluralize -%}{{ 'products.product.color_size_plural' | t: size: color_size }}{%- else -%}{{ 'products.product.color_size' | t: size: color_size }}{%- endif -%}{%- else -%}&nbsp;{%- endif -%}
            </span>
          </div>

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

          {%- if variant_info != blank -%}
            {%- assign featured_compare = featured_media | img_url: '533x' -%}
            <div class="card-information__variants d-flex justify-content-center">
              {% for variant_single in variant_info limit: 5 %}
                {%- assign variant_image = variant_single | split: '\\' -%}
                {%- if variant_image[0] != '' -%}
                  {%- assign image_width = variant_image[1] | times: 1 -%}
                  {%- assign image_height = variant_image[2] | times: 1 -%}

                  {%- assign variant_image_hover = variant_info_hover[forloop.index0] | split: '\\' -%}
                  {%- assign hover_image_width = variant_image_hover[1] | times: 1 -%}
                  {%- assign hover_image_height = variant_image_hover[2] | times: 1 -%}

                  <span class="card-information__variant-image{% if featured_compare == variant_image[0] %} current{% endif %}">
                    <span class="media media--transparent media--{{ media_size }} media--hover-effect">
                      <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[4] | escape }}"
                        loading="lazy"
                        class="motion-reduce card-variant"
                      width="{{ image_width }}"
                      height="{{ image_height }}"
                      data-id="{{ variant_image[3] }}"
                      {%  if show_varimg %}
                      data-featured="{{ variant_image[0] }}"
                      data-featuredsrcset="{%- 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 -%}"
                          {% else %}
                      data-featured="{{ variant_image[5] }}"
                      data-featuredsrcset="{%- if image_width >= 165 -%}{{ variant_image[5] | replace: '533x', '165x' }} 165w,{%- endif -%}
                        {%- if image_width >= 360 -%}{{ variant_image[5] | replace: '533x', '360x' }} 360w,{%- endif -%}
                        {%- if image_width >= 533 -%}{{ variant_image[5] | replace: '533x', '533x' }} 533w,{%- endif -%}
                        {%- if image_width >= 720 -%}{{ variant_image[5] | replace: '533x', '720x' }} 720w,{%- endif -%}
                        {%- if image_width >= 940 -%}{{ variant_image[5] | replace: '533x', '940x' }} 940w,{%- endif -%}
                        {%- if image_width >= 1066 -%}{{ variant_image[5] | replace: '533x', '1066x' }} 1066w{%- endif -%}"
                      {% endif %}
                      {% if variant_image_hover[0] != 'empty' %}
                        data-hover="{{ variant_image_hover[0] }}"
                        data-hoversrcset="{%- if hover_image_width >= 165 -%}{{ variant_image_hover[0] | replace: '533x', '165x' }} 165w,{%- endif -%}
                          {%- if hover_image_width >= 360 -%}{{ variant_image_hover[0] | replace: '533x', '360x' }} 360w,{%- endif -%}
                          {%- if hover_image_width >= 533 -%}{{ variant_image_hover[0] | replace: '533x', '533x' }} 533w,{%- endif -%}
                          {%- if hover_image_width >= 720 -%}{{ variant_image_hover[0] | replace: '533x', '720x' }} 720w,{%- endif -%}
                          {%- if hover_image_width >= 940 -%}{{ variant_image_hover[0] | replace: '533x', '940x' }} 940w,{%- endif -%}
                          {%- if hover_image_width >= 1066 -%}{{ variant_image_hover[0] | replace: '533x', '1066x' }} 1066w{%- endif -%}"
                        {% endif %}
                      >
                    </span>
                  </span>
                {%- endif -%}
              {% endfor %}
            </div>
          {%- endif -%}

        </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>