{% doc %}
  This snippet is used to render a product card.
  It is used in the product block, featured product block, and the product card block.
  The product object is null or when placeholders are rendered.

  @param {object} product - The product object
  @param {object} children - The children of the product card
  @param {number} [product_card_gap] - The gap between the product card children (overrides block settings)
{% enddoc %}

{% stylesheet %}
  product-card-link {
    width: 100%;
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (width < 750px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }

  /* Hide the variant swatches for product cards that show a swatches variant picker */
  :is(.product-card):has(swatches-variant-picker-component) .quick-add .variant-option--swatches {
    display: none;
  }

  /* Hide "Add" button for single option product cards that show a swatches variant picker */
  :is(.product-card):has(.quick-add__product-form-component--single-option):has(swatches-variant-picker-component)
    .quick-add__button--choose {
    display: none;
  }

  /* Hide "add" button for multi-variant product cards that don't show a swatches variant picker */
  :is(.product-card):has(.quick-add__product-form-component--multi-variant):not(:has(swatches-variant-picker-component))
    .quick-add__button--add {
    display: none;
  }

  /* Hover effect for single variant product cards and product blocks */

  /* stylelint-disable selector-max-specificity */
  :is(.product-card):has(.quick-add__product-form-component--single-variant) .card-gallery:hover {
    & .quick-add__button--choose {
      display: none;
    }

    & .quick-add__button--add {
      display: grid;
    }
  }

  .sd-product-card-rating {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    min-height: 24px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f4fbf6;
    color: #183f35;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
  }

  .sd-product-card-rating[hidden] {
    display: none !important;
  }

  .sd-product-card-rating[data-sd-rating-placement="title"] {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .sd-product-card-rating__stars {
    color: #00a66a;
    font-size: 0.82rem;
    letter-spacing: 0;
  }

  .sd-product-card-rating__score {
    color: #183f35;
  }

  .sd-product-card-rating__count {
    color: rgba(24, 63, 53, 0.72);
    font-weight: 650;
  }

  @media screen and (width < 750px) {
    .sd-product-card-rating {
      font-size: 0.72rem;
      gap: 4px;
      padding-inline: 6px;
    }
  }
{% endstylesheet %}

{% style %}
  {% if request.visual_preview_mode %}
    product-card-link {
      width: 100%;
      min-width: 250px;
    }
  {% endif %}
{% endstyle %}

{% liquid
  assign has_quick_add = false
  if settings.quick_add and product.available
    assign has_quick_add = true
  endif

  assign has_mobile_quick_add = false
  if has_quick_add and settings.mobile_quick_add
    assign has_mobile_quick_add = true
  endif

  assign product_card_id = 'product-card-link-' | append: block.id | append: '-' | append: product.id
  assign product_card_gap_value = product_card_gap | default: block.settings.product_card_gap

  if settings.transition_to_main_product
    assign featured_media_url = product.selected_or_first_available_variant.featured_image | image_url: width: 500
    if featured_media_url == blank
      assign featured_media_url = product.featured_media.preview_image | image_url: width: 500
    endif
  endif

  assign onboarding = false
  if product.id == empty
    assign onboarding = true
  endif
%}

{%- if settings.transition_to_main_product -%}
  <product-card-link
    data-product-id="{{ product.id }}"
    data-featured-media-url="{{ featured_media_url }}"
    data-product-transition="{{ settings.transition_to_main_product }}"
  >
{%- endif -%}
<product-card
  class="product-card"
  data-product-variants-size="{{ product.variants.size }}"
  id="product-card-{{ block.id }}"
  data-product-transition="{{ settings.transition_to_main_product }}"
  {{ block.shopify_attributes }}
>
  <a
    id="{{ product_card_id | md5 }}"
    {% unless onboarding %}
      href="{{ product.selected_or_first_available_variant.url }}"
      on:click="/navigateToProduct"
    {% endunless %}
    class="
      layout-panel-flex
      layout-panel-flex--column
      product-card__link
      product-grid__link
      spacing-style
      border-style
      gap-style
      {% if block.settings.inherit_color_scheme == false %} color-{{ block.settings.color_scheme }}{% endif %}
    "
    style="
      {% render 'border-override', settings: block.settings %}
      {% render 'layout-panel-style', settings: block.settings %}
      {% render 'spacing-style', settings: block.settings %}
      {% render 'gap-style', value: product_card_gap_value, name: 'product-card-gap' %}
      --quick-add-display: {% if has_quick_add %}flex{% else %}none{% endif %};
      --quick-add-mobile-display: {% if has_mobile_quick_add %}flex{% else %}none{% endif %};
      {% if block.settings.padding-inline-start > 0 %}--zoom-out-padding-inline-start: min(var(--padding-xs), {{ block.settings.padding-inline-start | times: 0.7}}px);{% endif %}
      {% if block.settings.padding-inline-end > 0 %}--zoom-out-padding-inline-end: min(var(--padding-xs), {{ block.settings.padding-inline-end | times: 0.7}}px);{% endif %}
      {% if block.settings.padding-block-start > 0 %}--zoom-out-padding-block-start: min(var(--padding-xs), {{ block.settings.padding-block-start | times: 0.7}}px);{% endif %}
      {% if block.settings.padding-block-end > 0 %}--zoom-out-padding-block-end: min(var(--padding-xs), {{ block.settings.padding-block-end | times: 0.7}}px);{% endif %}
    "
    ref="productCardLink"
  >
    {{ children }}
    {% unless onboarding %}
      {%- capture sd_review_stats_raw -%}{%- render 'sd-review-card-stats', product: product -%}{%- endcapture -%}
      {%- assign sd_review_stats = sd_review_stats_raw | strip | split: '|' -%}
      {%- assign sd_review_average = sd_review_stats | first | strip -%}
      {%- assign sd_review_count = sd_review_stats | last | strip -%}
      {%- assign sd_review_has_stats = false -%}
      {%- if sd_review_average != blank and sd_review_count != blank -%}
        {%- assign sd_review_has_stats = true -%}
        {%- assign sd_review_star_rating = sd_review_average | plus: 0 | round -%}
        {%- capture sd_review_star_text -%}
          {%- for i in (1..5) -%}
            {%- if i <= sd_review_star_rating -%}★{%- else -%}☆{%- endif -%}
          {%- endfor -%}
        {%- endcapture -%}
      {%- endif -%}
      <div
        class="sd-product-card-rating"
        data-product-review-badge
        data-product-handle="{{ product.handle | escape }}"
        data-product-title="{{ product.title | escape }}"
        data-reviews-json="{{ 'sd-reviews-data.json' | asset_url }}"
        aria-label="{% if sd_review_has_stats %}{{ sd_review_average }} out of 5 from {{ sd_review_count }} verified customer reviews for {{ product.title | escape }}{% else %}Customer reviews for {{ product.title | escape }}{% endif %}"
        {% if sd_review_has_stats %}data-sd-rating-ready="true"{% else %}hidden{% endif %}
      >
        <span class="sd-product-card-rating__stars" data-sd-card-stars aria-hidden="true">{% if sd_review_has_stats %}{{ sd_review_star_text | strip }}{% else %}★★★★★{% endif %}</span>
        <span class="sd-product-card-rating__score" data-sd-card-score>{% if sd_review_has_stats %}{{ sd_review_average }}{% endif %}</span>
        <span class="sd-product-card-rating__count" data-sd-card-count>{% if sd_review_has_stats %}({{ sd_review_count }} {% if sd_review_count == '1' %}review{% else %}reviews{% endif %}){% endif %}</span>
      </div>
    {% endunless %}
  </a>
</product-card>
{%- if settings.transition_to_main_product -%}
  </product-card-link>
{%- endif -%}
