{%- comment -%}
  Renders a product card

  Accepts:
  - card_product: {Object} Product Liquid object (required)
  - section_id: {String} The ID of the section that contains this card. (required)
  - sizes: {String} a list sizes of image.
  - class: {String} a list class.
  - image_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_rating: {Boolean} Show the product rating. Default: false
  - color_list: {Array}
  - size_list: {Array}

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

{%- liquid
  assign featured_media = card_product.featured_media | default: settings.placeholder_img
  assign color_count = 0
  
  if card_product.has_only_default_variant == false and settings.color_mode != 'hide' or settings.size_mode != 'hide'
     assign available_variants = card_product.variants | where: "available"
     for option in card_product.options_with_values
        assign name_downcase = option.name | downcase
        if settings.color_mode != 'hide' and color_list contains name_downcase and color_count == 0
          assign color_option_index = 'option' | append: forloop.index
          assign color_variants = option.values
          assign color_variants_avai = available_variants | map: color_option_index | uniq
          if settings.color_type == 'all'
            assign color_count = color_variants.size
          else
            if card_product.options_with_values.size == 1
              assign color_variants = color_variants_avai
            endif
            assign color_count = color_variants_avai.size
          endif
        endif
     endfor
  endif
  -%}
  
  <hdt-card-product class="hdt-card-product {{ class }}{% if card_product.available == false %} hdt-pr-sold_out{% endif %}">
    <div class="hdt-card-product__wrapper hdt-flex">
      <div class="hdt-card-product__media hdt-relative hdt-oh">
        {%- if featured_media -%}
          <a data-pr-url href="{{ product_url }}" data-instant calc-nav class="hdt-card-product__media-wrapp hdt-ratio"{% if image_ratio == 'adapt_image' %} style="--aspect-ratioapt: {{ featured_media.aspect_ratio }}"{% endif %}>
            {%- liquid
              echo featured_media | image_url: width: featured_media.width | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360', data-widths: '[165, 360]', class: 'hdt-card-product__media--main'
              if card_product.media[1] != null and settings.show_secondary_image
                assign next_media = card_product.media[featured_media.position] | default: card_product.media[1]
                echo next_media | image_url: width: next_media.width | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360', class: 'hdt-card-product__media--hover'
              endif
            -%}
          </a>
        {%- endif -%}
        {% comment %} {%- render 'badges', product: card_product, use_variant: false -%} {% endcomment %}
      </div>
      <div class="hdt-card-product__info hdt-card-align-left">
        {%- if settings.show_rating %}{% render 'hdt-pr-card-rating', product: card_product %}{% endif -%}
        <a data-pr-url href="{{ product_url }}" class="hdt-card-product__title hdt-text-lg hdt-font-normal hdt-line-clamp" data-instant>{{ card_product.title | escape }}</a>
        {%- liquid
          render 'card-price', product: card_product, show_volume_note: true, price_class: "hdt-text-base hdt-font-semibold"
          if color_count > 0
            render 'color-list', section_id: section_id, product: card_product, product_url: product_url, color_variants: color_variants, color_variants_avai: color_variants_avai, color_count: color_count, color_option_index: color_option_index, placement: 'top'
          endif
        -%}
      </div>
    </div>
  </hdt-card-product>