{% comment %}
  Renders a variants product comparation  .

  Accepts:
  - product: {Object} The product object (required)
  - variant_color_swatches: {Object} variant color swatches at variants block used for compare color(required)

  Usage:
  {% render 'compare', product: product %}
{% endcomment %}

{%- assign option = product.options_with_values | where: 'name', 'Color' | first -%}

<xo-modal xo-name='show-compare' xo-animate='fade-up' xo-portal class='compare__modal'>
  <div class='compare__modal-content'>
    <div class='compare__modal-header'>
      <div class='compare__modal-title'>Compare Color</div>
      <xo-modal-trigger class='compare__modal-close'>
        <button>{% render 'icon', name: 'close2', icon_size: '15' %}</button>
      </xo-modal-trigger>
    </div>
    <div class='compare__modal-body'>
      <div class='compare__variant-colorwrap'>
        {%- for value in option.values -%}
          {%- liquid
            assign variant_colors = variant_color_swatches | newline_to_br | split: '<br />'
            assign color = value
            for item in variant_colors
              assign _item = item | replace: '\n', ''
              assign _color = ':' | append: color
              if _item contains color
                assign color = _item | split: ':'
                assign color = color[1] | strip
              endif
            endfor
          -%}
          <xo-toggle-trigger xo-name='compare__variant-{{ value }}' class='compare__variant-color'>
            <button><span style='--color:{{ color }}'></span></button>
          </xo-toggle-trigger>
        {%- endfor -%}
      </div>
      <xo-grid
        style='
          --xs:2; --sm: 3; --md:4; --xo-grid-col-gap: 20px;
          --xo-grid-row-gap: 20px;
        '
      >
        {%- for value in option.values -%}
          {%- assign value_check = '' -%}
          {%- for variant in product.variants -%}
            {%- assign value = value | escape -%}
            {%- if variant.options contains value and value != value_check -%}
              {%- assign value_check = value -%}
              <xo-toggle class='compare__variant-image' xo-name='compare__variant-{{ value }}' style='--aspect_ratio:{{ settings.product_card_aspect_ratio }}'>
                {% render 'image', image: variant.featured_image, aspect_ratio: 1, container_class: 'variant-image' %}
                <div class='compare__variant-value'>{{ value }}</div>
              </xo-toggle>
            {%- endif -%}
          {%- endfor -%}
        {%- endfor -%}
      </xo-grid>
      <div class='compare__variant-note'>Click On Color / Pattern To Compare, Click And Drag Images To Reorder</div>
    </div>
  </div>
</xo-modal>
