{% if listCor %}
  {% for list in listCor %}
    <span class="ftr-chip ftr-out-space--r-l ftr-js-swipe-content-display ftr-js-color" data-url="{{ getscor }}">{{ list[0] }}</span>
    <div class="ftr-swipe-content ftr-js-swipe-content">
      <div class="ftr-swipe-content__header ftr-grid">
        <div>
          <i class="material-icons ftr-js-close">&#xE5CD;</i>
          <span class="ftr-text--s ftr-out-space--l-s">{{ list[0] }}</span>
        </div>
        {% if clearcor %}
          <a href="{{ linkclearcor }}" class="ftr-text--s ftr-text--primary">{{ text_clear }}</a>
        {% endif %}
      </div>
      <div class="ftr-swipe-content__main ftr-swipe-content__main--with-btn ftr-in-space--v-n">
        {% for key, color in list[1] %}
          <div class="ftr-flex">
            <div>
              <input class="ftr-check ftr-js-color__input" id="color-{{ key }}" type="checkbox" value="{{ color.product_color_id }}" {{ (color.checked is defined and color.checked) ? 'checked' : '' }}>
              <label class="ftr-check-label ftr-block" for="color-{{ key }}">
                <span class="ftr-check-label__text">{{ color.description }}</span>
              </label>
            </div>
            {% if color.primary_color and color.secundary_color %}
              <div style="width:20px; height: 20px; background: linear-gradient(135deg, {{ color.primary_color }} 0%, {{ color.primary_color }} 50%, {{ color.secundary_color }} 50%, {{ color.secundary_color }} 100%);box-shadow: 0 0 2px rgba(0,0,0,.5)"></div>
            {% elseif color.primary_color %}
              <div style="width:20px; height: 20px; background: {{ color.primary_color }};box-shadow: 0 0 2px rgba(0,0,0,.5)"></div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
      <div class="ftr-swipe-content__btn ftr-js-close">
        <button type="button" class="ftr-btn ftr-h--full ftr-background--primary ftr-js-ripple-effect ftr-js-color__button">
          {{ text_apply }}
        </button>
      </div>
    </div>
  {% endfor %}
{% endif %}

{% if listSize %}
  {% for list in listSize %}
    <span class="ftr-chip ftr-out-space--r-l ftr-js-swipe-content-display ftr-js-size" data-url="{{ getsize }}">{{ list[0] }}</span>
    <div class="ftr-swipe-content ftr-js-swipe-content">
      <div class="ftr-swipe-content__header ftr-grid">
        <div>
          <i class="material-icons ftr-js-close">&#xE5CD;</i>
          <span class="ftr-text--s ftr-out-space--l-s">{{ list[0] }}</span>
        </div>
        {% if clearsize %}
          <a href="{{ linkclearsize }}" class="ftr-text--s ftr-text--primary">{{ text_clear }}</a>
        {% endif %}
      </div>
      <div class="ftr-swipe-content__main ftr-swipe-content__main--with-btn ftr-in-space--v-n">
        {% for key, size in list[1] %}
          <input class="ftr-check ftr-js-size__input" id="size-{{ key }}" type="checkbox" value="{{ size.product_size_id }}" {{ (size.checked is defined and size.checked) ? 'checked' : '' }}>
          <label class="ftr-check-label ftr-block" for="size-{{ key }}">
            <span class="ftr-check-label__text">{{ size.description }}</span>
          </label>
        {% endfor %}
      </div>
      <div class="ftr-swipe-content__btn ftr-js-close">
        <button type="button" class="ftr-btn ftr-h--full ftr-background--primary ftr-js-ripple-effect ftr-js-size__button">
          {{ text_apply }}
        </button>
      </div>
    </div>
  {% endfor %}
{% endif %}

{% if listSpecification %}
  {% for list in listSpecification %}
    <span class="ftr-chip ftr-out-space--r-l ftr-js-swipe-content-display ftr-js-specification" data-url="{{ getspecification }}">{{ list[0] }}</span>
    <div class="ftr-swipe-content ftr-js-swipe-content">
      <div class="ftr-swipe-content__header ftr-grid">
        <div>
          <i class="material-icons ftr-js-close">&#xE5CD;</i>
          <span class="ftr-text--s ftr-out-space--l-s">{{ list[0] }}</span>
        </div>
        {% if clearspecifications %}
          <a href="{{ linkclearspecifications }}" class="ftr-text--s ftr-text--primary">{{ text_clear }}</a>
        {% endif %}
      </div>
      <div class="ftr-swipe-content__main ftr-swipe-content__main--with-btn ftr-in-space--v-n">
        {% for key, specification in list[1] %}
          <input class="ftr-check ftr-js-specification__input" id="specification-{{ key }}" type="checkbox" value="{{ specification.product_specification_id }}" {{ (specification.checked is defined and specification.checked) ? 'checked' : '' }}>
          <label class="ftr-check-label ftr-block" for="specification-{{ key }}">
            <span class="ftr-check-label__text">{{ specification.description }}</span>
          </label>
        {% endfor %}
      </div>
      <div class="ftr-swipe-content__btn ftr-js-close">
        <button type="button" class="ftr-btn ftr-h--full ftr-background--primary ftr-js-ripple-effect ftr-js-specification__button">
          {{ text_apply }}
        </button>
      </div>
    </div>
  {% endfor %}
{% endif %}