{% comment %}
  Renders a product card

  Accepts:
  - product: {Object} Product Liquid object (required)
  - media_aspect_ratio:  {String} The setting changes the aspect ratio of the article image, if shown
  - show_image: {Boolean} The setting either show the article image or not. If it's not included it will show the image by default
  - product_card_media_type: {String} The product media type show when hover(optional)
  - variant_modal_placement: {'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'default'} Render placement variant for modal add cart. Default: 'center' (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false (optional)
  - show_description: {Boolean} Show the description. Default: false (optional)
  - show_quick_add: {Boolean} Show the quick add button. Default: true (optional)
  - show_quick_view: {Boolean} Show the quick view button. Default: true (optional)
  - show_wishlist: {Boolean} Show the wishlist button. Default: true (optional)
  - show_price: {Boolean} Show the product price. Default: true (optional)
  - show_badge: {Boolean} Show the product badge. Default: true (optional)
  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-1' (optional)
  - color_scheme: {String} The color scheme to use (optional)
  - animate_enabled: {Boolean} Enable animation. Default: true (optional)

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

{% liquid
  assign animate_enabled = animate_enabled | default: true, allow_false: true
  if animate_enabled
    assign tag_name = 'xo-animate'
  else
    assign tag_name = 'div'
  endif
%}

{% comment %} Create navigate icon used in product card media type carousel {% endcomment %}
{% capture prev_icon %}
  <span class='xo-product-card__carousel-prev'>
    {% render 'icon', name: 'chevron-left', size: '20' %}
  </span>
{% endcapture %}
{% capture next_icon %}
  <span class='xo-product-card__carousel-next'>
    {% render 'icon', name: 'chevron-right', size: '20' %}
  </span>
{% endcapture %}

{% comment %} Create attr for xo-product-media {% endcomment %}
{% case product_card_media_type %}
  {% when 'auto' %}
    {% capture product_media_attr %}
    xo-type="auto" xo-carousel-autoplay="1500" xo-carousel-pagination-enabled xo-carousel-bullet-content="<span class='xo-product-card__bullet'></span>"
    style="--xo-auto-play: 1500ms"
  {% endcapture %}
  {% when 'carousel' %}
    {% capture product_media_attr %}
    xo-type="carousel" xo-carousel-autoplay="0" xo-carousel-prev-content="{{ prev_icon | escape }}" xo-carousel-next-content="{{ next_icon | escape }}"
  {% endcapture %}
  {% when 'video_autoplay' %}
    {% capture product_media_attr %}
    xo-type="video"
  {% endcapture %}
  {% else %}
    {% capture product_media_attr %}
    xo-type="carousel" xo-carousel-autoplay="1500" xo-carousel-pagination-enabled xo-carousel-bullet-content="<span class='xo-product-card__bullet'></span>"
    style="--xo-auto-play: 1500ms"
  {% endcapture %}
{% endcase %}

{% if product %}
  <xo-product xo-product-id='{{ product.id }}' xo-section-id='{{section.id}}'>
    {% capture render_header %}
    <div class="xo-product-card__header xo-product-card__header--style4">
      {% if show_image %}
        <a href='{{ product.url }}'>
          <xo-product-media {{ product_media_attr }} xo-binding="img" xo-carousel-active-index="0">
            {% render 'product-image', product: product, media_aspect_ratio: media_aspect_ratio %}
          </xo-product-media>
        </a>
      {% endif %}

      {% if show_badge %}
        <div class='xo-product-card__badge'>
          {% render 'badge-sale', product: product, use_variant: true %}
        </div>
        {% render 'badge-sold-out', product: product, use_variant: true %}
      {% endif %}

      <div class='xo-product-card__actions xo-product-card__actions--style4'>
        {% if show_quick_add %}
          {% render 'action-cart-add', product: product, variant_modal_placement: variant_modal_placement %}
        {% endif %}

        {% if show_quick_view %}
          <xo-tooltip xo-title="{{ 'products.product.quickview' | t }}" class="xo-product-card__icon">
          <xo-product-quick-view-trigger xo-modal-name='quick-view' xo-product-url='{{ shop.url }}/products/{{ product.handle }}/?section_id=quick-view-content'>
            {% render 'button', class:'circle', style: 'primary', mode: 'light', icon: 'search', size: 'sm' %}
          </xo-product-quick-view-trigger>
        </xo-tooltip>
        {% endif %}

       {% if show_wishlist %}
        <div>
        {% comment %} add to wishlist {% endcomment %}
          <xo-products-fetcher-add xo-type="wishlist" class="xo-product-card__wishlist">
            <xo-tooltip xo-title='{{ 'products.product.add_to_wishlist' | t }}' class="xo-product-card__icon xo-product-card__icon-wishlist" xo-added>
              {% render 'button', class:'circle', style:'primary', mode: 'light', icon: 'heart', size: 'sm' %}
            </xo-tooltip>
          </xo-products-fetcher-add>
          {% comment %} remove wishlist {% endcomment %}
          <xo-products-fetcher-add xo-type="wishlist" class="xo-product-card__wishlist">
            <xo-tooltip xo-title='{{ 'products.product.remove_from_wishlist' | t }}' class="xo-product-card__icon xo-product-card__icon-wishlist" xo-removed>
              {% render 'button', class:'circle', style:'primary', mode: 'light', icon: 'heart', size: 'sm' %}
             </xo-tooltip>
          </xo-products-fetcher-add>
        </div>
      {% endif %}
      </div>

      <div class='xo-product-card__information xo-product-card__information--style4'>
        {% if show_vendor %}
          <div class='xo-product-card__vendor'>
            {{ product.vendor }}
          </div>
        {% endif %}
  
        <h2 class='xo-product-card__title' id="title-{{ section.id }}-{{ product.id }}">
          <a href='{{ product.url }}' id="CardLink-{{ section.id }}-{{ product.id }}" aria-labelledby="CardLink-{{ section.id }}-{{ product.id }} Badge-{{ section.id }}-{{ product.id }}">
            {{ product.title | escape }}
          </a>
        </h2>
  
        {% if show_description%}
          <div class='xo-product-card__description'>
            {{ product.description | strip_html | truncate: 230 }}
          </div>
        {% endif %}
  
        {% if show_price %}
          <div class='xo-product-card__price'>
            <div class='xo-product-card__price-inner' xo-binding="price">
              {% render 'price', product: product, use_variant: true, reverse: false, card:true %}
            </div>
          </div>
        {% endif %}
      </div>

      {% if product.variants.size > 1 %}
        {% for option in product.options_with_values
        %}
          {% if option.name == 'Color' %}
            <div class='xo-product-card__variants xo-product-card__variants--style4'>
              {% render 'product-variant', option: option, modified: 'style4', product: product, style: 'color' %}
            </div>
            {% break %}
          {% endif %}
        {% endfor %}
        {% render 'product-variant-modal', product: product, variant_modal_placement: variant_modal_placement %}
      {% endif %}
    </div>
  {% endcapture %}

    <{{ tag_name }}
      xo-cascade
      class='xo-product-card xo-product-card--style4{% if color_scheme %} color-{{ color_scheme }}{% endif %}'
    >
      {{ render_header }}
      {% render 'product-data', product: product %}
      {% render 'product-static-data', product: product, media_aspect_ratio: media_aspect_ratio %}
    </{{ tag_name }}>
  </xo-product>
{% else %}
  {% render 'product-card-placeholder', placeholder_image: placeholder_image %}
{% endif %}
