{%- comment -%}
  Renders a product card

  Accepts:
  - product: {Object} Product Liquid object (required)
  - block: {Object} passing the block information. (required)

  Usage:
  {%- render 'compare-color', product: product, block: block -%}
{%- endcomment -%}

{%- liquid
  assign color_list = 'products.theme_settings.color' | t | downcase | strip | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq
  assign color_white = 'products.theme_settings.color_white' | t | downcase | strip
  assign colors = shop.metafields.ecomrise.colors.value
  assign color_values = shop.metaobjects.theme_swatch.values | first
  assign colors2 = color_values.colors.value
  assign color_count = 0

  unless product.has_only_default_variant
    for option in product.options_with_values
      assign name_downcase = option.name | downcase
      if color_list contains name_downcase
        assign color_index = forloop.index
        assign color_option_index = 'option' | append: color_index
        assign color_variants = option.values
        assign color_count = color_variants.size
      endif
    endfor
  endunless
-%}
<style>
  .hdt-compare-color__button {
    min-width: 2.4rem;
    min-height: 2.4rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--rounded-full);
    transition-duration: 150ms;
    transition-property: color, background-color;
    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
    color: rbg(var(--color-foreground));
  }
  .hdt-compare-color__button svg {
    width: 2rem;
    fill: currentColor;
  }
  .hdt-compare-color__button:not(:hover) svg + svg {
    color: rgb(var(--color-foreground) / .3);
  }
  .hdt-compare-color__button:hover {
    background-color: rgb(var(--color-foreground) / .1);
  }
  .hdt-compare-color__list {
    gap: 1rem;
  }
  .hdt-compare-color__color {
    border: 0.1rem solid rgb(var(--color-line-border));
    gap: 0.7rem;
    padding: 0.3rem 0.4rem;
    align-items: center;
  }
  .hdt-compare-color__color .hdt-color-list-color {
    border-radius: var(--rounded-full);
  }
</style>

{%- if color_count > 1 -%}
  <button aria-controls="Compare-color-{{ block.id }}" aria-expanded="false">Comapre color</button>
  <hdt-modal id="Compare-color-{{ block.id }}" class="hdt-modal hdt-modal__compare-color hdt-hidden" effect="slide" config='{"appendToBody": true}' color-scheme="{{ settings.color_scheme_dialog }}" initial-focus="false">
    <div slot="header" class="hdt-compare-color__header">
      <h3>Compare color</h3>
      <hdt-compare-color-toogle class="hdt-compare-color__list hdt-flex">
        {%- for color in color_variants -%}

          {%- liquid
            assign color_downcase = color | downcase
            assign color_handle = color | handle
            assign color_obj = colors[color_handle] | default: colors2[color_handle]
            assign color_style_inline = ''
            assign image = images[color_obj.imageName]
            if image != blank
              assign color_image = image | image_url: width: 80
              assign color_image_style = '--hdt-bg-image: url(' | append: color_image | append: ');'
            else
              assign color_image_style = nil
              assign color_style_inline = color_obj.colorsCSS
            endif
          -%}

          <div class="hdt-compare-color__color hdt-flex hdt-rounded-full">
            <span class="hdt-color-list-color{% if color_white == color_downcase %} hdt-bg-color-white{% endif %}"{% if color_image_style or color_style_inline.size > 0 %} style="{{ color_image_style }}{{ color_style_inline }}"{% endif %}></span>
            <span>{{ color | escape }}</span>
            <button class="hdt-compare-color__button">
              <svg viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M13 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-1.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"></path><path fill-rule="evenodd" d="M10 4c-2.476 0-4.348 1.23-5.577 2.532a9.266 9.266 0 0 0-1.4 1.922 5.98 5.98 0 0 0-.37.818c-.082.227-.153.488-.153.728s.071.501.152.728c.088.246.213.524.371.818.317.587.784 1.27 1.4 1.922 1.229 1.302 3.1 2.532 5.577 2.532 2.476 0 4.348-1.23 5.577-2.532a9.265 9.265 0 0 0 1.4-1.922 5.98 5.98 0 0 0 .37-.818c.082-.227.153-.488.153-.728s-.071-.501-.152-.728a5.984 5.984 0 0 0-.371-.818 9.269 9.269 0 0 0-1.4-1.922c-1.229-1.302-3.1-2.532-5.577-2.532Zm-5.999 6.002v-.004c.004-.02.017-.09.064-.223a4.5 4.5 0 0 1 .278-.608 7.768 7.768 0 0 1 1.17-1.605c1.042-1.104 2.545-2.062 4.487-2.062 1.942 0 3.445.958 4.486 2.062a7.77 7.77 0 0 1 1.17 1.605c.13.24.221.447.279.608.047.132.06.203.064.223v.004c-.004.02-.017.09-.064.223a4.503 4.503 0 0 1-.278.608 7.768 7.768 0 0 1-1.17 1.605c-1.042 1.104-2.545 2.062-4.487 2.062-1.942 0-3.445-.958-4.486-2.062a7.766 7.766 0 0 1-1.17-1.605 4.5 4.5 0 0 1-.279-.608c-.047-.132-.06-.203-.064-.223Z"></path></svg>
              <svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" hidden><path d="M11.977 4.751a7.598 7.598 0 0 0-1.977-.251c-2.444 0-4.196 1.045-5.325 2.233a7.188 7.188 0 0 0-1.243 1.773c-.26.532-.432 1.076-.432 1.494 0 .418.171.962.432 1.493.172.354.4.734.687 1.116l1.074-1.074a5.388 5.388 0 0 1-.414-.7c-.221-.453-.279-.753-.279-.835 0-.082.058-.382.279-.835a5.71 5.71 0 0 1 .983-1.398c.89-.937 2.264-1.767 4.238-1.767.24 0 .471.012.693.036l1.284-1.285Z"></path><path fill-rule="evenodd" d="M4.25 14.6a.75.75 0 0 0 1.067 1.053l1.062-1.061c.975.543 2.177.908 3.621.908 2.45 0 4.142-1.05 5.24-2.242 1.078-1.17 1.588-2.476 1.738-3.076a.749.749 0 0 0 0-.364c-.15-.6-.66-1.906-1.738-3.076a7.245 7.245 0 0 0-.51-.502l.923-.923a.75.75 0 0 0-1.053-1.068l-.008.008-10.335 10.336-.008.007Zm5.75-.6c-.978 0-1.809-.204-2.506-.523l1.108-1.109a2.75 2.75 0 0 0 3.766-3.766l1.3-1.299c.169.147.325.3.469.455a6.387 6.387 0 0 1 1.332 2.242 6.387 6.387 0 0 1-1.332 2.242c-.86.933-2.17 1.758-4.137 1.758Zm0-2.75c-.087 0-.172-.01-.254-.026l1.478-1.478a1.25 1.25 0 0 1-1.224 1.504Z"></path></svg>
            </button>
          </div>
        {%- endfor -%}
      </hdt-compare-color-toogle>
    </div>
    <div class="hdt-compare-color-wrapp hdt-flex">
      {%- for color in color_variants -%}

        {%- liquid
          assign variants_has_color = product.variants | where: color_option_index, color
          assign available_variants_has_color = variants_has_color | where: 'available'
          assign variant_first_color = variants_has_color | first
          if variant_first_color.featured_image
            assign variant_first_image = variant_first_color
          else
            assign variant_first_image = variants_has_color | where: 'featured_image' | first
          endif
          unless product.available
            assign available_variants_has_color = variants_has_color
          endunless
          assign unselected = true
        -%}

        <div class="hdt-compare-color-item">
          {%- liquid
          if variant_first_image
            echo variant_first_image | image_url: width: variant_first_image.width | image_tag: loading: 'lazy', sizes: '360px', widths: '165, 360, 533, 668, 720, 940, 940, 1066, 1200, 1450'
          endif -%}
          <wrapp-hdt-pr-frm class="hdt-contents">
            {%- form 'product', product, id: product_form_id, class: 'hdt-product-form-compare-color' -%}
              {%- if product.options_with_values.size > 1 and variants_has_color.size > 0 -%}
                <select class="hdt-select" name="id">
                  {%- for variant in variants_has_color -%}
                    <option value="{{ variant.id }}" {% if unselected and forloop.last or variant.available %}{% assign unselected = false %}selected{% endif %}{% if variant.available == false %} disabled {% endif %}>
                      {%- liquid
                        assign str = color | append: ';||;'
                        for option in variant.options
                          if forloop.index != color_index
                            assign str = str | append: option | append: ';||;'
                          endif
                        endfor
                        echo str | split: ';||;' | join: ' / '
                        echo variant.price | money | strip_html | prepend: ' - '
                      -%}
                    </option>
                  {%- endfor -%}
                </select>
              {%- else -%}
                <span class="hdt-s-text hdt-compare-color-price">{{ available_variants_has_color.first.price | money }}</span>
                <input type="hidden" name="id" value="{{ available_variants_has_color.first.id }}">
              {%- endif -%}
              <button type="submit" name="add"{% if available_variants_has_color.size == 0 or product.available == false %} disabled{% endif %}>
                <span>{% if available_variants_has_color.size == 0 or product.available == false %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}</span>
              </button>
            {%- endform -%}
          </wrapp-hdt-pr-frm>
        </div>

      {%- endfor -%}
    </div>
  </hdt-modal>
{%- endif -%}