{%- 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
  unless product_url
    assign product_url = card_product.url
  endunless
  assign featured_media = card_product.featured_media | default: settings.placeholder_img
  assign color_count = 0
  assign size_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
        elsif settings.size_mode != 'hide' and size_list contains name_downcase and size_count == 0
          assign size_option_index = 'option' | append: forloop.index
          assign size_variants_avai = available_variants | map: size_option_index | uniq
          assign size_variants = option.values
          if settings.size_type == 'all'
            assign size_count = size_variants.size
          else
            if card_product.options_with_values.size == 1
              assign size_variants = size_variants_avai
            endif
            assign size_count = size_variants_avai.size
          endif
        endif
     endfor
  endif

  assign stock_value = card_product.metafields.theme.product_stock.value | split: '/'
  if stock_value != blank
      assign stock_sold = stock_value[0] | default: 0
      assign total_stock = stock_value[1] | default: 0
  endif
  assign available = total_stock | minus: stock_sold

  -%}
  
  <hdt-card-product class="hdt-card-product {{ class }}{% if card_product.available == false %} hdt-pr-sold_out{% endif %}">
    <div class="hdt-card-product__wrapper">
      <div class="hdt-card-product__media hdt-relative hdt-oh{% if size_count > 0 %} hdt-has-size-list{% endif %}">
        <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 | default: '127.7777778%' }}"{% endif %}>
          {%- if featured_media -%}
            {%- liquid
              echo featured_media | image_url: width: featured_media.width | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 533, 668, 720, 940, 940, 1066, 1200, 1450', data-widths: '[165, 360, 533, 668, 720, 940, 940, 1066, 1200, 1450]', 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, 533, 668, 720, 940, 940, 1066, 1200, 1450', class: 'hdt-card-product__media--hover'
              endif
            -%}
          {%- endif -%}
        </a>
        {%- render 'badges', product: card_product, use_variant: false -%}
        <div class="hdt-product-btns hdt-absolute">
          {%- if settings.show_ultra_btn %}{% render 'btn-ultra', class: 'hdt-pr_btn', product: card_product, product_url: product_url, section_id: section_id, placement: 'top' %}{% endif -%}
          {%- liquid
            echo btn_wishlist_code | replace_first: '19041994', card_product.id | replace_first: 'handle_nt_94', card_product.handle
            if settings.compare_mode != "0"
              render 'btn-compare', product_id: card_product.id, product_handle: card_product.handle, class: 'hdt-pr_btn hdt-card-product__btn-compare', placement: 'top'
            endif -%}
          {%- if settings.show_quick_view %}{% render 'btn-quick-view', class: 'hdt-pr_btn', product: card_product, section_id: section_id, placement: 'top' %}{% endif -%}
        </div>
        {%- liquid 
          if size_count > 0
            render 'size-list', size_variants: size_variants, size_variants_avai: size_variants_avai, size_count: size_count
          endif -%}
      </div>
      <div class="hdt-card-product__info hdt-card-align-{{ settings.pr_card_alignment }}">
        {%- if settings.show_rating %}{% render 'hdt-pr-card-rating', product: card_product %}{% endif -%}
        {%- liquid
        if card_product.vendor.size > 0 and show_vendor
          render 'vendor' with card_product.vendor, class: 'hdt-inline-block hdt-text-base hdt-font-normal'
        endif -%}
        <a data-pr-url href="{{ product_url }}" class="hdt-card-product__title hdt-text-{{ settings.pr_title_size }} hdt-font-{{ settings.pr_title_weight }} hdt-line-clamp" data-instant>{{ card_product.title | escape }}</a>
        {%- liquid
          render 'card-price', section_id: section_id, 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
        -%}
        {% if stock_value != blank %}
          <div class="hdt-pr-stock hdt-block">
            <div class="hdt-pr-stock-status hdt-flex hdt-justify-between hdt-text-sm hdt-font-semibold">
              <div class="hdt-pr-stock-available">
                <span class="hdt-pr-stock-label">{{ 'sections.featured_collection.product_stock.available' | t }}</span> 
                <span class="hdt-pr-stock-value">{{ available }}</span>
              </div>
              <div class="hdt-pr-stock-sold">
                <span class="hdt-pr-stock-label">{{ 'sections.featured_collection.product_stock.sold' | t }}</span> 
                <span class="hdt-pr-stock-value">{{ stock_sold }}</span>
              </div>
            </div>
            <div class="hdt-status-bar">
              <hdt-progress-bar data-hdt-percent="1" class="hdt-progress-bar hdt-sold-bar" role="progressbar" aria-valuemin="0" aria-valuemax="{{ stock_value[1] }}" aria-valuenow="{{ available }}" data-colors='{"0":"is-intial", "0.7":"is-unreached", "1":"is-success"}' style="--progress-rate: 0;" reveal-in-view></hdt-progress-bar>
            </div>
          </div>
        {% endif %}
        {%- if card_product.metafields.theme.countdown.value != blank %}{% render 'countdown2' , countdown: card_product.metafields.theme.countdown.value, class: "hdt-pr-countdown hdt-text-hdt-text-8xl hdt-font-medium" %}{% endif -%}
      </div>
    </div>
  </hdt-card-product>