<div 
    id="sticky-add-to-cart" 
    data-show-type="{{ section.settings.show_type }}"
    data-show-type-percentage="{{ section.settings.show_type_percentage }}"
    data-position="{{ section.settings.position }}"
    style="background-color: {{ section.settings.background_color }}c0;">

    {%- form 'product', product -%}
    <input type="number" class="hide" name="quantity" min="1" value="1">
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

    <h2 style="color: {{ section.settings.text_color }};" {%- unless section.settings.show_title -%} class="hide-only-mobile"{%- endunless -%}>{{ product.title | strip_html }}</h2>
    <div>
        {%- unless product.has_only_default_variant -%}
        {%- capture style -%}
            color: {{ section.settings.text_color }};
            border-color: {{ section.settings.text_color }}55;

            {% if section.settings.select_width > 0 %}
                width: {{ section.settings.select_width }}px;
            {% else %}
                flex: 1;
            {% endif %}
        {%- endcapture -%}

        {%- for option in product.options_with_values -%}
            <select name="{{ option.name | escape }}" style="{{ style | strip_newlines | strip }}">
                {%- for value in option.values -%}
                    <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                        {{ value }}
                    </option>
                {%- endfor -%}
            </select>
        {%- endfor -%}
        {%- endunless -%}
    </div>

    {%- assign button_label = 'sections.sticky-add-to-cart.button' -%}
    {% if section.settings.button_label == "cart" %}
        {%- assign button_label = 'sections.sticky-add-to-cart.button_cart' -%}
    {% endif %}

    <button type="submit" class="btn" {% render 'overwrite-theme-style', settings: section.settings %}>{{ button_label | t }}</button>

    {%- endform -%}

</div>
    
{% schema %}
{
    "name": "t:sections.section-sticky-add-to-cart.name",
    "settings": [
        {
            "type": "select",
            "id": "position",
            "label": "t:sections.section-sticky-add-to-cart.settings.position",
            "default": "top",
            "options": [
                {
                    "value": "bottom",
                    "label": "t:sections.section-sticky-add-to-cart.settings.position_bottom"
                },
                {
                    "value": "top",
                    "label": "t:sections.section-sticky-add-to-cart.settings.position_top"
                }
            ]
        },
        {
            "type": "color",
            "id": "background_color",
            "label": "t:sections.section-sticky-add-to-cart.settings.background_color",
            "default": "#000000"
        },
        {
            "type": "color",
            "id": "text_color",
            "label": "t:sections.section-sticky-add-to-cart.settings.text_color",
            "default": "#ffffff"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "select",
            "id": "show_type",
            "label": "t:sections.section-sticky-add-to-cart.settings.show_type",
            "default": "cart_button",
            "options": [
                {
                    "value": "cart_button",
                    "label": "t:sections.section-sticky-add-to-cart.settings.show_type_cart_button"
                },
                {
                    "value": "percentage",
                    "label": "t:sections.section-sticky-add-to-cart.settings.show_type_percentage"
                }
            ]
        },
        {
            "type": "range",
            "id": "show_type_percentage",
            "label": "t:sections.section-sticky-add-to-cart.settings.show_type_percentage",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "%",
            "default": 0
        },
        {
            "type": "select",
            "id": "button_label",
            "label": "t:sections.section-sticky-add-to-cart.settings.button_label",
            "default": "buy",
            "options": [
                {
                    "value": "buy",
                    "label": "t:sections.section-sticky-add-to-cart.settings.button_label_buy"
                },
                {
                    "value": "cart",
                    "label": "t:sections.section-sticky-add-to-cart.settings.button_label_cart"
                }
            ]
        },
        {
            "type": "header",
            "content": "t:sections.section-sticky-add-to-cart.settings.header_mobile"
        },
        {
            "type": "checkbox",
            "id": "show_title",
            "label": "t:sections.section-sticky-add-to-cart.settings.show_title",
            "default": true
        },
        {
            "type": "range",
            "id": "select_width",
            "label": "t:sections.section-sticky-add-to-cart.settings.select_width",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-sticky-add-to-cart.settings.select_width_info"
        },
        {
            "type": "header",
            "content": "t:sections.section-sticky-add-to-cart.settings.button_header"
        },
        {
            "type": "color",
            "id": "overwrite_theme_background_color",
            "label": "t:sections.section-sticky-add-to-cart.settings.overwrite_theme_background_color",
            "info": "t:sections.section-sticky-add-to-cart.settings.overwrite_theme_background_color_info",
            "default": "#0071e3"
        },
        {
            "type": "range",
            "id": "overwrite_theme_font_size",
            "label": "t:sections.section-sticky-add-to-cart.settings.overwrite_theme_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 13,
            "info": "t:sections.section-sticky-add-to-cart.settings.overwrite_theme_font_size_info"
        },
        {
            "type": "color",
            "id": "overwrite_theme_text_color",
            "label": "t:sections.section-sticky-add-to-cart.settings.overwrite_theme_text_color",
            "info": "t:sections.section-sticky-add-to-cart.settings.overwrite_theme_text_color_info",
            "default": "#ffffff"
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-sticky-add-to-cart.name"
        }
    ]
}
{% endschema %}