{% 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: 'style10' (optional)

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

{{ 'product-info-content-quickview.css' | asset_url | stylesheet_tag }}
{{ 'product-info-media-style3.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 }}
{{ 'section-quick-view-content.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_main %}
    <xo-grid>
      <div style="--xs: 12; --md: 4">
        <div class="xo-product-card-style10__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 %}`,
                      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 %}
          {% if product.variants.size > 1 %}
            {% for option in product.options_with_values
            %}
              {% if option.name == 'Color' %}
                <div class='xo-product-card-style10__variants'>
                  {% render 'product-variant', option: option, product:product %}
                </div>
                {% break %}
              {% endif %}
            {% endfor %}
          {% endif %}
        </div>
      </div>
      <div style="--xs: 12; --md: 8">
        <div class='xo-product-card-style10__information'>
          {% if show_vendor %}
            <div class='xo-product-card-style10__vendor'>
              {{ product.vendor }}
            </div>
          {% endif %}
  
          <h2 class='xo-product-card-style10__title'>
            <a href='{{ product.url }}'>
              {{ product.title | escape }}
            </a>
          </h2>

          {% 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 %}
              </div>
            </div>
          {% endif %}
  
          {% if show_description%}
            <div class='xo-product-card-style10__description {% if section.settings.collection_style == 'fullwidth' %}
              xo-product-card-style10__description--fullwidth
            {% endif %}'>
              {{ product.description | strip_html }}
            </div>
          {% endif %}
  
          <div class='xo-product-card-style10__actions '>
            {% if product.variants.size > 1 %}
              <xo-tooltip xo-title='{{ 'products.product.select_option' | t }}' class="xo-product-card__icon">
                {% render 'button', class:'square', style: '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
                    xo-product-id='{{ product.selected_or_first_available_variant.id }}'
                    {% if product.selected_or_first_available_variant.available == false %}
                      xo-disabled
                    {% endif %}
                  >
                    {% render 'button', class:'square', style: '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:'square', style: 'light', icon: 'search', size: 'sm' %}
              </xo-product-quick-view-trigger>
            </xo-tooltip>
            {% endif %}
    
            {% if true %}
              <xo-tooltip xo-title='{{ 'products.product.add_to_wishlist' | t }}' class="xo-product-card__icon">
                {% render 'button', class:'square', style: 'light', icon: 'heart', size: 'sm' %}
              </xo-tooltip> 
            {% endif %}
          </div>
        </div>
      </div>
    </xo-grid>
    {% endcapture %}
    <{{ tag_name }}
      xo-cascade
      class='xo-product-card-style10{% if color_scheme %} color-{{ color_scheme }}{% endif %}'
    >
      {{ render_main }}
      {% render 'product-data', product: product %}
    </{{ tag_name }}>
  </xo-product>
{% else %}
  {% render 'product-card-placeholder', placeholder_image: placeholder_image %}
{% endif %}
