{% comment %}
  Renders a product card

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - 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
  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (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: false (optional)
  - show_quick_view: {Boolean} Show the quick view button. Default: false (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)
  - product_card_style: {String} The product card style to use. Default: 'style9' (optional)

  Usage:
  {% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'product-info-content-quickview.css' | asset_url | stylesheet_tag }}
{{ 'product-info-media-style12.css' | asset_url | stylesheet_tag }}
{{ 'section-quick-view-content.css' | asset_url | stylesheet_tag }}
{{ 'countdown-stock.css' | asset_url | stylesheet_tag }}
{{ 'countdown-time.css' | asset_url | stylesheet_tag }}
{{ 'reviews.css' | asset_url | stylesheet_tag }}
{{ 'product-info-variant.css' | asset_url | stylesheet_tag }}
{{ 'badge.css' | asset_url | stylesheet_tag }}
{{ 'product-360.css' | asset_url | stylesheet_tag }}
{{ 'popup-video.css' | asset_url | stylesheet_tag }}

{% liquid
  if animate_enabled == null
    assign animate_enabled = true
  endif
  assign tag_name = 'div'
  if animate_enabled
    assign tag_name = 'xo-animate'
  endif
%}
{% if product %}
  <xo-product xo-product-id='{{ product.id }}' xo-section-id='{{section.id}}'>
    {% capture render_header %}
    <div class="xo-product-card__header">
      {% if show_image %}
        <div xo-binding="img">
          <a href='{{ product.url }}'>
            {% render 'product-image', product: product, show_secondary_image: show_secondary_image, media_aspect_ratio:media_aspect_ratio %}
          </a>
        </div>
        <xo-product-liquid-static>
          <script type="application/json">
            {
              {% for variant in product.variants
              %}
                {{ variant.id}}: {
                  price: `{% render 'price', variant: variant, reverse: false, card:true %}`,
                  img: `<a href='{{ product.url }}'>{% render 'product-image',product: product, variant: variant, show_secondary_image: show_secondary_image, media_aspect_ratio:media_aspect_ratio %}</a>`
                },
              {% endfor %}
            }
          </script>
        </xo-product-liquid-static>
      {% 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 product.variants.size > 1 %}
          <xo-tooltip xo-title="{{ 'products.product.select_option' | t }}" class="xo-product-card__icon">
            {% render 'button', class:'circle', style: 'primary', mode: 'light', icon: 'more', size: 'sm', link: product.url %}
          </xo-tooltip>
          {% else %}
          {% if show_quick_add %}
            <xo-tooltip xo-title="{{ 'products.product.add_to_cart' | t }}" class='xo-product-card__icon'>
            <xo-cart-add
              {% if product.selected_or_first_available_variant.available == false %}
                xo-disabled
              {% endif %}
            >
              {% render 'button', class:'circle', style: 'primary', mode: 'light', icon: 'cart', size: 'sm' %}
            </xo-cart-add>
          </xo-tooltip>
        {% endif %}
        {% 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 true %}
          <div class="xb-wishlist__add" xb-product-id='{{product.id}}' xb-product-title='{{ product.title }}'>
            <xo-tooltip xo-title='{{ 'products.product.add_to_wishlist' | t }}' class="xo-product-card__icon">
              {% render 'button', class:'circle', style: 'primary', mode: 'light', icon: 'heart', size: 'sm' %}
            </xo-tooltip>
          </div>
          <div class="xb-wishlist__remove" xb-product-id='{{product.id}}'>
            <xo-tooltip xo-title='{{ 'products.product.remove_from_wishlist' | t }}' class="xo-product-card__icon">
              {% render 'button', class:'circle', style: 'primary', mode: 'light', icon: 'heart', size: 'sm' %}
            </xo-tooltip>
          </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 %}
            </div>
            {% break %}
          {% endif %}
        {% endfor %}
      {% endif %}

      <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'>
          <a href='{{ product.url }}'>
            {{ 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>
    </div>
  {% endcapture %}

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