{% comment %}
Properties:
- product
- settings => makes all following

- left_align, boolean
- show_variant, boolean
- show_reviews, boolean
- show_conrise_reviews, boolean
- conrise_review_stars_metafield, string
- conrise_review_number_metafield, string
- border_color, string
- background_color, string
- image_ratio, auto, portrait, square
- show_badge, boolean
- show_dots, boolean
- badge_background_color, color
- badge_text_color, color
- show_form, boolean
- show_quantity, boolean
- subtitle_metafield, string
{% endcomment %}

{%- if product == blank -%}
    {% comment %} Dummy product card {% endcomment %}
    <div class="card-product no-link-style">
        <div class="card-product-image auto">
            {% render 'image', 
                placeholder_padding_vertical: 40,
                placeholder_padding_horizontal: 20 %}
        </div>
    
        <div class="card-product-content ">
            <a href="/products/raquel-black-style">
                <h2 class="h4">{{ 'sections.section-collection.default_product_title' | t }}</h2>
            </a>
            <div class="card-product-reviews"></div>
            <div class="card-product-price font-heading">
                <span class="price  price-reverse">
                    <s data-compare-price="4900">{{ 'sections.section-collection.price_compare' | t }}</s> 
                    <span data-price="2900">{{ 'sections.section-collection.price' | t }}</span>
                </span>
            </div>
        </div>
    </div>

    {%- break -%}
{%- endif -%}

{%- if settings != blank -%}
    {%- assign image_ratio = settings.card_image_ratio -%}
    {%- assign left_align = settings.card_left_align -%}
    {%- assign show_reviews = settings.card_show_reviews -%}
    {%- assign show_conrise_reviews = settings.card_show_conrise_reviews -%}
    {%- assign conrise_review_stars_metafield = settings.card_conrise_review_stars_metafield -%}
    {%- assign conrise_review_number_metafield = settings.card_conrise_review_number_metafield -%}
    {%- assign show_variant = settings.card_show_variant -%}
    {%- assign show_badge = settings.card_show_badge -%}
    {%- assign show_dots = settings.show_dots -%}
    {%- assign show_form = settings.card_show_form -%}
    {%- assign show_quantity = settings.show_quantity -%}
    {%- assign cart_type = settings.cart_type -%}   
    {%- assign subtitle_metafield = settings.subtitle_metafield -%}   

    {%- assign badge_background_color = settings.badge_background_color -%}
    {%- assign badge_text_color = settings.badge_text_color -%}

    {%- assign border_color = blank -%}

    {%- if settings.card_show_border -%}
        {%- assign border_color = "var(--color-border)" -%}

        {%- if settings.card_border_color != blank -%}
            {%- assign alpha = settings.card_border_color | color_extract: 'alpha' -%}
    
            {%- if alpha == 1 -%}
                {%- assign border_color = settings.card_border_color | color_to_hex -%}
            {%- endif -%}
        {%- endif -%}
    {%- endif -%}    

    {%- assign background_color = blank -%}
    {%- if settings.card_background_color != blank -%}
        {%- assign alpha = settings.card_background_color | color_extract: 'alpha' -%}
    
        {%- if alpha == 1 -%}
            {%- assign background_color = settings.card_background_color | color_to_hex -%}
        {%- endif -%}
    {%- endif -%}  

    {%- assign discount_badge_type = settings.discount_badge_type -%}
    {%- assign discount_badge_border_radius = settings.discount_badge_border_radius -%}
    {%- assign disount_badge_color = settings.disount_badge_color -%}
    {%- assign discount_badge_text_color = settings.discount_badge_text_color -%}
    {%- assign discount_badge_font_size = settings.discount_badge_font_size -%}

{%- endif -%}

{%- assign class = "" -%}

{%- capture style -%}
    {%- if background_color != blank -%}
        background-color: {{ background_color }};
    {%- endif -%}

    {%- if border_color != blank -%}
        border: 1px solid {{ border_color }};

        {%- assign class = "card-product-border" -%}
    {%- endif -%}
{%- endcapture -%}

<div class="card-product no-link-style {{ class }}" {% if style != blank %}style="{{ style | strip_newlines }}"{% endif %}>
    <div class="card-product-image {% if image_ratio != blank %}{{ image_ratio }}{% else %}auto{% endif %}">
        <a href="{{ product.url | within: collection }}">
            {% render 'image', image: product.featured_image %}
        </a>

        {%- if show_badge -%}
            {% assign tags = product.tags | join: '{{}}' | downcase | split: '{{}}' %}
            
            {%- if tags contains 'bestseller' -%}
                <div class="card-product-image-badge font-heading" {% render 'overwrite-theme-style', background_color: badge_background_color, text_color: badge_text_color %}>{{ 'product.badge_bestseller' | t }}</div>
            {%- elsif product.selected_or_first_available_variant.available == false -%}
                <div class="card-product-image-badge product-media-main-badge-sold-out font-heading" {% render 'overwrite-theme-style', background_color: badge_background_color, text_color: badge_text_color %}>{{ 'product.badge_sold_out' | t }}</div>
            {%- elsif product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price and product.available -%}
                <div class="card-product-image-badge font-heading" {% render 'overwrite-theme-style', background_color: badge_background_color, text_color: badge_text_color %}>{{ 'product.badge_sale' | t }}</div>
            {%- endif -%}
        {%- endif -%}
    </div>

    <div class="card-product-content {% if left_align %}card-product-content-left{% endif %}">
        <a href="{{ product.url | within: collection }}">
            <h2 class="h4 {% if show_dots == true %} dots{% endif %}">{{ product.title }}</h2>
        </a>

        {%- if subtitle_metafield != blank -%}
            {% assign metafield_brackets = subtitle_metafield | split: "." %}
            {% assign metafield_brackets_size = metafield_brackets | size %}

            {% if metafield_brackets_size < 2 %}
                {% assign subtitle = product.metafields[metafield_brackets[0]] %}
            {% else if metafield_brackets_size == 2 %}
                {% assign subtitle = product.metafields[metafield_brackets[0]][metafield_brackets[1]] %}
            {% endif %}

            {%- if subtitle != blank -%}
                <p class="card-product-content-subtitle">{{ subtitle }}</p>
            {%- endif -%}
        {%- endif -%}

        {%- if show_variant == true and product.has_only_default_variant == false -%}
            <p>{{ product.selected_or_first_available_variant.title }}</p>
        {%- endif -%}

        {%- if show_reviews or show_conrise_reviews -%}
            <div class="card-product-reviews">
                {%- if show_conrise_reviews -%}
                    {% assign stars = 5 %}
                    {% assign number = 100 %}

                    {%- if conrise_review_stars_metafield != blank -%}
                        {% assign metafield_brackets = conrise_review_stars_metafield | split: "." %}
                        {% assign metafield_brackets_size = metafield_brackets | size %}

                        {% if metafield_brackets_size < 2 %}
                            {% assign stars = product.metafields[metafield_brackets[0]] %}
                        {% else if metafield_brackets_size == 2 %}
                            {% assign stars = product.metafields[metafield_brackets[0]][metafield_brackets[1]] %}
                        {% endif %}
                    {%- endif -%}

                    {%- if conrise_review_number_metafield != blank -%}
                        {% assign metafield_brackets = conrise_review_number_metafield | split: "." %}
                        {% assign metafield_brackets_size = metafield_brackets | size %}

                        {% if metafield_brackets_size < 2 %}
                            {% assign number = product.metafields[metafield_brackets[0]] %}
                        {% else if metafield_brackets_size == 2 %}
                            {% assign number = product.metafields[metafield_brackets[0]][metafield_brackets[1]] %}
                        {% endif %}
                    {% endif %}

                    <div class="card-product-reviews-conrise">
                        {% render 'review-stars', stars: stars, id: product.id %}
                        <span>({{ number }})</span>
                    </div>
                {%- else -%}
                    {% render 'review-widget', type: "badge", product: product %}
                {%- endif -%}
            </div>
        {%- endif -%}
        
        <div class="card-product-price font-heading">
            {% render 'price', product: product, show_compare_price: true, handle_price_range: true, use_variant: show_form %}

            
        </div>

        {%- if discount_badge_type != blank and discount_badge_type != 'no' -%}
            {%- capture style -%}
                border-radius: {{ discount_badge_border_radius }}px;
                background-color: {{ disount_badge_color | color_to_hex }};
                color: {{ discount_badge_text_color | color_to_hex }};
                --product-information-price-saved-tag-fill: {{ discount_badge_text_color | color_to_hex }};

                {% if product.selected_or_first_available_variant.compare_at_price == blank or product.selected_or_first_available_variant.compare_at_price <= product.selected_or_first_available_variant.price %}
                    display: none;
                {% endif %}

                {% if discount_badge_font_size > 0 %}
                    font-size: {{ discount_badge_font_size }}px;
                {% endif %}
            {%- endcapture -%}

            <div class="card-product-price-saved" data-type="{{ discount_badge_type }}" style="{{ style | strip_newlines | strip }}">
                {%- capture icon_style -%}
                    {% if discount_badge_font_size > 0 %}
                        width: {{ discount_badge_font_size | times: 1.2 }}px;
                        height: {{ discount_badge_font_size | times: 1.2 }}px;
                    {% endif %}
                {%- endcapture -%}
                {% render 'icon-tag', style: icon_style %} {{ 'product.price_saving' | t }}&nbsp;
                
                <span>
                    {%- if discount_badge_type == 'percentage' -%}
                        <span class="percentage">
                            {{ product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | times: 100 | divided_by: product.selected_or_first_available_variant.compare_at_price }}%
                        </span>                    {%- else -%}
                        {%- assign price = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price -%}
                        {% render 'price', price: price %}
                    {%- endif -%}
                </span>
            </div>    
        {%- endif -%}

        {%- if show_form == true -%}
            <div class="card-product-form">
            {%- form 'product', product, data-type: 'add-to-cart-form' -%}
                <input type="number" class="hide" name="quantity" min="1" value="1">
                <input type="hidden" name="productid" value="{{ product.id }}">
                <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

                {%- if product.options_with_values.size > 0 and product.has_only_default_variant == false -%}
                    <div class="card-product-form-variantcontainer">
                    {%- for option in product.options_with_values -%}
                        <div class="card-product-form-variantcontainer-variant">
                            <label>{{ option.name }}</label>
                            <select class="product-card-variant-select" name="{{ option.name | escape }}">
                                {%- for value in option.values -%}
                                    <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                        {{ value }}
                                    </option>
                                {%- endfor -%}
                            </select>
                        </div>
                    {%- endfor -%}
                    </div>

                    <script>
                        var cr_product_{{ product.id }} = {{ product | json }};
                        var cr_product_card_{{ product.id }} = {{ product | json }};
                    </script>
                {%- endif -%}

                <div class="card-product-form-submitcontainer">
                    <div class="product-information-quantity {% unless show_quantity %} hide{% endunless %}">
                        <button class="disabled" name="minus" type="button">{% render 'icon-minus' %}</button>
                        <span class="product-information-quantity-input font-button">1</span>
                        <button name="plus" type="button">{% render 'icon-plus' %}</button>
                    </div>

                    <button class="btn" type="submit" data-cart-type="{{ cart_type }}" >
                        {{ 'product.cart_button' | t }}
                    </button>
                </div>
            {%- endform -%}
            </div>
        {%- endif -%}
    </div>
</div>