<!-- style attributes --><link rel="stylesheet" media="all" href="{{ 'style-attributes.css' | asset_url }}">

{% assign mostrar_selector_atributos = true %}          <!-- true = dibuja atributos, false = oculta atributos -->
{% assign mostrar_selector_atributos_desde = 1 %} <!-- para que se muestren siempre atributos dejar en 1, sino dejar en 2 -->
{% assign Button_selector_variante = true %}
{% assign Button_selector_atributos = true %}
{% assign Button_selector_colores = true %}

{% comment %} NO MODIFICAR ESTA VARIABLE {% endcomment %}
{% assign atributosRequeridos = 0 %}
{% for sizeAttr in product.attributes %}
    {% if sizeAttr[1].required == 1 %}
        {% comment %} si el atributo es requerido se suma {% endcomment %}
        {% assign atributosRequeridos = atributosRequeridos | plus : 1 %}
    {% endif %}
{% endfor %}

<div class="form mt-2" id="bs-product-form"> 
    {% comment %} si tiene al menos un atributo requerido y tiene definido mostrar atributos {% endcomment %}
    {%if atributosRequeridos >= mostrar_selector_atributos_desde and mostrar_selector_atributos == true %}
        {% for pAttr in product.attributes%}
            {% if pAttr[1].required > 0 %}
                {% if pAttr[1].isColor == 1 %}
                    {% comment %} ES COLOR {% endcomment %}
                    {% if Button_selector_colores == false %}
                        <div class="dropdown attr-dropdown">
                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                <label  class="bs-product__label__attr" 
                                        data-bs="{{pAttr[0]}}" data-info="" 
                                        class-labelError="is-invalid" >
                                        {{pAttr[0] | capitalize}}:
                                </label>
                            </button>
                            <div class="dropdown-menu">
                                {% for val in  pAttr[1].colors %}
                                        <button
                                            class="dropdown-item"
                                            data-bs="product.attributes"
                                            class-selected="attr-selected"
                                            class-disable="attr-disabled"
                                            data-info="{{pAttr[0]}}"
                                            value='{{val.name}}'
                                        >
                                        <span class="attr-color-ball" style="--color-attr: {{val.code}};"></span> {{val.name | capitalize}}
                                        </button>
                                {% endfor %}
                            </div>
                        </div>
                    {% else %}
                        <div class="form-group row mx-0 " >
                            <label class="bs-product__label__attr col-12 px-1 mb-1" data-bs="{{pAttr[0]}}" data-info="" class-labelError="is-invalid">
                                {{pAttr[0] | capitalize}}:
                            </label>
                            {% for val in  pAttr[1].colors %}
                                <div class="col-auto px-1 pb-1 ">
                                    <button
                                        class="btn-attr btn-color"
                                        data-bs="product.attributes"
                                        class-selected="attr-selected"
                                        class-disable="attr-disabled"                                  
                                        data-info="{{pAttr[0]}}"
                                        value='{{val.name}}'
                                    >
                                    <span class="attr-color-ball" tooltip="{{val.name | capitalize }}" style="--color-attr: {{val.code}};"></span>
                                    </button>
                                </div>
                            {% endfor %} 
                        </div>
                    {% endif %}
                {% else %}
                    {% comment %} NO ES COLOR {% endcomment %}
                    {% if Button_selector_atributos == false %}
                        <div class="dropdown  attr-dropdown">
                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                <label  class="bs-product__label__attr " 
                                        data-bs="{{pAttr[0]}}" data-info="" 
                                        class-labelError="is-invalid" >
                                        {{pAttr[0] | capitalize}}:
                                </label>
                            </button>
                            <div class="dropdown-menu">
                                    {% for val in  pAttr[1].values %}
                                            <button
                                                class="dropdown-item"
                                                data-bs="product.attributes"
                                                class-selected="attr-selected"
                                                class-disable="attr-disabled"
                                                data-info="{{pAttr[0]}}"
                                                value='{{val}}'
                                            >
                                            {{val}}
                                            </button>
                                    {% endfor %}
                            </div>
                        </div>
                    {% else %}
                        <div class="form-group row mx-0 " >
                            <label class="bs-product__label__attr col-12 px-1 mb-1" data-bs="{{pAttr[0]}}" data-info="" class-labelError="is-invalid">
                                {{pAttr[0] | capitalize}}:
                            </label>
                            {% for val in  pAttr[1].values %}
                                <div class="col-auto px-1 pb-1 ">
                                    <button
                                        class="btn-attr"
                                        data-bs="product.attributes"
                                        class-selected="attr-selected"
                                        class-disable="attr-disabled" 
                                        data-info="{{pAttr[0]}}"
                                        value='{{val}}'
                                    >
                                        {{val}}
                                    </button>
                                </div>
                            {% endfor %}
                        </div>
                    {%endif%}
                {% endif %}
            {% endif %}
        {% endfor %}
    {% elsif variant.size > 1 %}
        {%comment%} ES VARIANTE {%endcomment%}
        {% if Button_selector_variante == true %}
            {%comment%} ES BOTON {%endcomment%}
            {% for var in variant %}
                <div class="bs-variant-select col-auto px-1 pb-1">
                    <input 
                        data-bs="product.variant"
                        data-info="{{var.id}}"
                        type="radio" 
                        value="{{ forloop.index }}" 
                        id="var{{forloop.index}}"
                        name="variantes"
                        {% if var.id == product.variantId %} checked {% endif %}
                        class="bs-variant-select__input {% if products.classification != 1 %}{% unless var.unlimitedStock > 0 or var.allowNegativeStock > 0 %}{% assign st = var.id | get_stock_variant %}{% if st <= 0 %}disabled{% endif %}{% endunless %}{% endif %}"
                    >
                    <label class="bs-variant-select__label" for="var{{forloop.index}}">
                        {% if var.title.size > 0 %}{{var.title}}{% else %}{{var.sku}}{%endif%}
                    </label>
                </div>
            {% endfor %}
        {% else %}
            {%comment%} ES SELECT {%endcomment%}
                <div class="form-group">
                    <label class="bs-product__label">Opciones</label>
                    <select data-bs="product.variant" class="form-control">
                        {% for var in variant %}
                            <option
                                {% assign outStock = false %}
                                {% if products.classification != 1 %}{% unless var.unlimitedStock > 0 or var.allowNegativeStock > 0 %}{% assign st = var.id | get_stock_variant %}{% if st <= 0 %}class="disabled"{% assign outStock = true %}{% endif %}{% endunless %}{% endif %}
                            
                                data-info='{{var.id}}'
                                value="{{ forloop.index }}"
                                {% if var.id == product.variantId %} selected {% endif %}>
                                {% if var.title.size > 0 %}{{var.title}}{% else %}{{var.sku}}{%endif%}
                                {% if outStock %} × Sin Stock {%endif %} 
                            </option>
                        {% endfor %}
                    </select>
                </div>
        {% endif %}
    {% endif %}
</div>

{% assign deleteAttibutes = "atributo 1,atributo oculto 2" | split: ',' %}

{% comment %} VERSION DICIEMBRE 2022 {% endcomment %}
<aside class="bs-collection-filter col-lg-3">
    <form id="bs-collection-filter-form">
        <section class="row">
            <div class="col-12 h3 d-none d-lg-block">
                    Filtros
            </div>
            <div class="col-12 d-flex d-lg-block align-items-center justify-content-between mb-1">
                <a  class="btn btn-secondary order-lg-2"
                    href="{{ paginate.link }}">
                    <i class="fas fa-undo-alt"></i>
                    <span class="d-none d-sm-inline">Limpiar</span>
                </a>
                <a class="d-lg-none btn btn-link collapsed" href="#filter-toggle" data-toggle="collapse" role="button" title="Filtros">
                        Filtros
                        <i class="fas fa-caret-down"></i>
                </a>
                
                <button class="btn btn-secondary" type="submit">
                    <i class="d-none d-lg-inline fas fa-filter"></i>
                    Filtrar
                </button>
            </div>
        </section>
        <section class="collapse d-lg-block" id="filter-toggle" >
            {% if collection.limitPrice.minPrice != collection.limitPrice.maxPrice %}
                <div id="bs-collection-filter-price" class=" my-1">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div
                                data-bs="filter.range"
                                data-min="{{ collection.limitPrice.minPrice }}"
                                data-max="{{ collection.limitPrice.maxPrice }}"
                        >
                            </div>
                        </li>
                    </ul>
                </div>
            {% endif%}
        
            {% for attr in collection.attributes %}
                {%assign flagAttr = false %}
                {% for del in deleteAttibutes %}
                    {% if attr[1].name == del %}
                        {%assign flagAttr = true %}
                        {{break}}
                    {% endif %}
                {% endfor %}
                <!-- elimina marca si esta en la url /brand/ -->
                {% if attr[0] == "Brands" and current_url contains "/brand/" %}
                    {% assign flagAttr == true %}
                {% endif %}
                <!---------------------------->
                {% if flagAttr == false %}
                    {% if attr[1].values.size > 0 %}
                            <div class="panel-heading my-1">
                                <a
                                    class="btn d-flex justify-content-between align-items-center bs-filter-btn collapsed" 
                                    data-toggle="collapse" 
                                    href="#{{ attr[1].code }}{{ attr[0] }}">
                                    {{ attr[1].name }}<i class="fas fa-angle-down"></i>
                                </a>
                            </div>
                            <div id="{{ attr[1].code }}{{ attr[0] }}" class="panel-collapse collapse my-1 {% if attr[1].isColor == 1 %} panel-color{%endif%}">

                            {% if attr[1].isColor == 1 %}
                                
                                <ul class="list-group">
                                {% for color in attr[1].attrDetails %}
                                    <li class="list-group-item py-2">
                                        <input id="{{ attr[1].code | url_encode}}-{{ forloop.index }}"
                                                class="bs-collection-filter-input bs-filter-color-input"
                                                type="checkbox"
                                                value="{{ color.name | url_encode }}"
                                                title="{{ color.name | capitalize }}"
                                                data-filter="{{ attr[1].code | url_encode }}[]">
                                        <label class="bs-filter-color-label" style="--attr-code:{{color.code}}" for="{{ attr[1].code | url_encode}}-{{ forloop.index }}" data-tooltip="{{ color.name | capitalize }}">
                                        {{ color.name | capitalize }} {{color.id_color}}
                                        </label>      
                                {% endfor %}
                                    </li>
                                </ul>
                            {% else %}
                                <ul class="list-group">
                                    {% assign data = attr[1].code %}
                                    {% for item in attr[1].values %}
                                        {% if item.size > 0 %}
                                            <li class="list-group-item py-2">
                                                <div class="custom-control custom-checkbox">
                                                    <input
                                                        id="{{ attr[1].code | url_encode}}-{{ forloop.index }}-{{ attr[0] }}"
                                                        class="custom-control-input bs-collection-filter-input"
                                                        type="checkbox"
                                                        value="{{ item | url_encode }}"
                                                        data-filter="{{ attr[1].code | url_encode }}[]">
                                                    <label class="custom-control-label" for="{{ attr[1].code | url_encode }}-{{ forloop.index }}-{{ attr[0] }}">
                                                        {{ item }}
                                                    </label>
                                                </div>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                </ul>
                            {% endif %}
                            </div>
                   
                    {% endif %}
                {% endif %}
                {%assign flagAttr = false %}
            {%endfor%}
        </section>
    </form>
</aside>