<div class="itemSelection itemSizeSelectWrapper">
    {% if item.sizes|length == 1 %}

        <input type="hidden" name="size" value="{{ item.sizes[0].id }}"/>
        {#{{ item.sizes[0].size }}#}

    {% elseif item.sizes|length > 1 %}

        {#<label for="itemSizes_{{ item.id }}" class="variationLabel">Select Variation</label>#}

        <div class="inputWrap">
            {% if item.has_quantities %}

                <div
                        class="row"
                        {% if item.size_strengths|length == 1 and item.size_strengths[0] == '' %}style="display:none;"{% endif %}
                >

                    {% if item.size_strengths|length > 16 %}

                        <label for="itemStrengths">{% if item.custom.strength_field_name != '' %}{{ item.custom.strength_field_name }}{% else %}Strength{% endif %}:</label>

                        <select id="itemStrengths" class="itemStrengths">
                            {% for strength, sizes in item.size_strengths %}
                                <option value="{{ md5(strength) }}">
                                    {{ strength }}
                                </option>
                            {% endfor %}
                        </select>

                    {% else %}

                        <div class="radioButtons">

                            <ul class="buttonList">
                                {% for strength, sizes in item.size_strengths %}
                                    <li>
                                        <input type="radio" id="radio_option_{{ loop.index }}" name="itemStrengths" value="{{ md5(strength) }}" class="itemStrengths" {% if loop.index == 1 %}checked{% endif %}>
                                        <label for="radio_option_{{ loop.index }}" class="radioButton">
                                            {{ strength }}
                                        </label>
                                    </li>
                                {% endfor %}
                            </ul>

                        </div> <!-- .radioButtons -->

                    {% endif %}

                </div> <!-- .row -->

                {% set sizes_exist = false %}

                {% for strength, sizes in item.size_strengths %}

                    {% if sizes|length > 16 %}

                        <div class="row sizeQuantities" id="sizeQuantities_{{ md5(strength) }}">
                            <label for="quantityField">Quantity:</label>


                            {% set opt_count = 0 %}
                            {% for size in sizes %}
                                {% if (size.stock > 0 and size.hide != 1) %}
                                    {% set opt_count = opt_count + 1 %}
                                {% endif %}
                            {% endfor %}


                            <select id="quantityField" class="itemSizes {% if opt_count < 2 %}softDisable{% endif %}">
                                <!--<option value="">Please select:</option>-->
                                {% for size in sizes %}

                                    {% if (size.stock > 0 and size.hide != 1) %}

                                        {% set sizes_exist = true %}

                                        <option value="{{ size.id }}"
                                                data-price="{{ size.price }}"
                                                data-sale="{{ size.sale_price > 0 ? 1 : 0 }}"
                                                {% if size.sale_price > 0 %}
                                                    data-sale-price="{{ size.sale_price }}"
                                                    data-percentage-off="{{ ((size.price - size.sale_price) / size.price * 100)|round }}"
                                                {% else %}
                                                    data-sale-price="0"
                                                    data-percentage-off="0"
                                                {% endif %}
                                                {% if size.stock == 0 %} disabled{% endif %}
                                                {% if loop.index == 1 %} selected{% endif %}
                                        >
                                            {% if size.size %}
                                                {{ size.size }}
                                            {% elseif size.quantity != ''%}
                                                {{ size.quantity }}
                                            {% endif %}

                                            {% if size.stock == 0 %}
                                                (Out of Stock)
                                            {% endif %}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>

                            {% set opt_count = 0 %}

                        </div> <!-- .row -->

                    {% else %}
                        <div class="row sizeQuantities" id="sizeQuantities_{{ md5(strength) }}">

                            <div class="radioButtons">

                                {% set opt_count = 0 %}

                                {% for size in sizes %}
                                    {% if (size.stock > 0 and size.hide != 1) %}
                                        {% set opt_count = opt_count + 1 %}
                                    {% endif %}
                                {% endfor %}


                                <ul class="buttonList">
                                    {% for size in sizes %}

                                        {% if (size.stock > 0 and size.hide != 1) %}

                                            {% set sizes_exist = true %}

                                            <li>

                                                <input
                                                        type="radio"
                                                        id="size_radio_option_{{ loop.index }}"
                                                        name="quantityField"
                                                        value="{{ size.id }}"
                                                        class="itemSizes"
                                                        data-price="{{ size.price }}"
                                                        data-sale="{{ size.sale_price > 0 ? 1 : 0 }}"
                                                        {% if size.sale_price > 0 %}
                                                            data-sale-price="{{ size.sale_price }}"
                                                            data-percentage-off="{{ ((size.price - size.sale_price) / size.price * 100)|round }}"
                                                        {% else %}
                                                            data-sale-price="0"
                                                            data-percentage-off="0"
                                                        {% endif %}
                                                        {% if size.stock == 0 %} disabled{% endif %}
                                                        {% if loop.index == 1 %}checked{% endif %}>

                                                <label for="size_radio_option_{{ loop.index }}" class="radioButton">

                                                    {% if size.size %}
                                                        {{ size.size }}
                                                    {% elseif size.quantity != ''%}
                                                        {{ size.quantity }}
                                                    {% endif %}

                                                    {% if size.stock == 0 %}
                                                        (Out of Stock)
                                                    {% endif %}

                                                </label>

                                            </li>

                                        {% endif %}

                                    {% endfor %}
                                </ul>

                            </div> <!-- .radioButtons -->

                        </div> <!-- .row -->
                   {% endif %}

                {% endfor %}


                <input type="hidden" name="size" id="selectedSize" value=""/>

            {% else %}
                <div class="row">
                    <label for="selectedSize">{% if item.custom.strength_field_name != '' %}{{ item.custom.strength_field_name }}{% else %}Strength{% endif %}
                        :</label>
                    <select id="selectedSize" class="itemSizes" name="size">
                        {% for strength, sizes in item.size_strengths %}
                            <option value="{{ sizes[0].id }}" data-price="{{ sizes[0].display_price }}"{% if sizes[0].stock == 0 %} disabled{% endif %}>
                                {{ strength }}
                                : {{ sizes[0].display_price|multi_currency|raw }}
                                {% if sizes[0].stock == 0 %}(Out of Stock){% endif %}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
        </div> <!-- .inputWrap -->
    {% endif %}
</div> <!-- .itemSizeSelectWrapper -->


{% set sizes_exist = false %}

{% for strength, sizes in item.size_strengths %}
    {% for size in sizes %}
        {% if (size.stock > 0 and size.hide != 1) %}
            {% set sizes_exist = true %}
        {% endif %}
    {% endfor %}
{% endfor %}


{% if sizes_exist is empty %}
    <div class="formInline">
        <div class="row itemSizeSelectWrapper">
            <label for="quantity">
                Quantity
            </label>
            <div class="inputWrap">
                <input type="number"
                       value="1"
                       min="1"
                       max="999"
                       maxlength="3"
                       class="text"
                       name="quantity"
                       id="quantity" />
            </div>
        </div>
    </div>
{% else %}
    <input type="hidden" value="1" name="quantity" id="quantity" />
{% endif %}
