{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == text-swatch %}
    {% assign option_index = forloop.index0 %}
    <style>
      label[for="product-select-option-{{ option_index }}"] { display: none; }
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
    <script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'coulor' or downcased_option contains 'Cor' or downcased_option contains 'Cor' or downcased_option contains 'Escolha uma cor' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

<div class="swatch swatches-selector-wrapper size clearfix" data-option-index="{{ option_index | plus: 1 }}">
  <div class="header">
    <h5>{{ option.name }}</h5>
  </div>
  {% assign values = '' %}
  <div class="swatch_item">
    {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
    {% assign values = values | join: ',' %}
    {% assign values = values | append: ',' | append: value %}
    {% assign values = values | split: ',' %}
    <div data-value="{{ value | escape }}" class="swatch-element color-swatch size-swatch {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">

      <input class="single-option-selector-{{ section.id }} hide radio_option" data-index="option{{ option_index | plus: 1 }}" id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if option.selected_value == value %}checked{%endif%} {% unless variant.available %}{% endunless %} />
      {% if is_color %}
      <label for="swatch-{{ option_index }}-{{ value | handle }}" title="{{ value }}">
        {{ value }}
        <div class="crossed-out"></div>
      </label>
      {% else %}
      <label for="swatch-{{ option_index }}-{{ value | handle }}">
        {{ value }}
        <div class="crossed-out"></div>
      </label>
      {% endif %}
    </div>
    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index | plus: 1 }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
    {% endfor %}
  </div>
</div>
