{% assign my_array = 'suggestion-0, suggestion-1'
    | split: ', ' %}

<script>
      Object.assign(window, {
        DIALOG_PRODUCT_VARIABLES: {
          productId: "{{ product.id }}",
          selectedVariantId: "{{ product.selected_variant.id }}",
          titleFontSize: "{{ block.settings.titleFontSize }}",
          contentFontSize: "{{ block.settings.contentFontSize }}"
        }
      });

      const updateUI = () => {
        const elements = document.querySelectorAll('.dialog-input-submit');
        elements.forEach(element => {
          if (window.DIALOG_VARIABLES.ctaBorderType === 'straight') {
            element.classList.add('dialog-input-submit-squared');
            element.innerHTML = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.16367 0.130033C3.368 -0.05572 3.68422 -0.0406617 3.86997 0.163667L8.86997 5.66367C9.04335 5.85438 9.04335 6.14563 8.86997 6.33634L3.86997 11.8363C3.68422 12.0407 3.368 12.0557 3.16367 11.87C2.95934 11.6842 2.94428 11.368 3.13003 11.1637L7.82427 6L3.13003 0.83634C2.94428 0.632011 2.95934 0.315787 3.16367 0.130033Z" fill="white"></path></svg>`;
          }
        });
      };

      const waitForDialogVariables = setInterval(() => {
        if (window.DIALOG_VARIABLES) {
          clearInterval(waitForDialogVariables);
          updateUI();
        }
      }, 10);
</script>

<div
    id="dialog-shopify-ai-product"
    data-product-id="{{ product.id }}"
    data-product-title="{{ product.title | escape }}"
    data-handle="{{ product.handle}}"
    data-selected-variant-id="{{ product.selected_or_first_available_variant.id }}"></div>

<div
    class="dialog-instant"
    id="dialog-instant"
    data-product-id="{{ product.id }}">
    <div class="dialog-instant-text">
        <span id="assistant-name" class="dialog-question-text-title">
            {{ 'blocks.instant.your-expert' | t }}
        </span>
        {% if block.settings.enableProductQuestion %}
            <span id="description" class="dialog-question-text-description">
                {{ 'blocks.instant.any-question' | t }}
            </span>
        {% endif %}
    </div>

    <div class="dialog-suggestion-wrapper">
        <div class="dialog-suggestions-container" id="dialog-suggestions-container">
            {% for suggestion in my_array %}
                <button
                    class="dialog-suggestion"
                    id="dialog-{{ suggestion }}"
                    type="button">
                    <svg
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_466_934)">
                            <path
                                d="M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011
        12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684
        13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559
        15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232
        16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179
        16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962
        15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418
        13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225
        13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675
        10.8333Z"
                                stroke="#181825"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path
                                d="M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175
        5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687
        6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632
        8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348
        9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829
        10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939
        9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043
        6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207
        5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001
        1.66666Z"
                                stroke="#181825"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round" />
                        </g>
                        <defs>
                            <clipPath id="clip0_466_934">
                                <rect
                                    width="20"
                                    height="20"
                                    fill="white" />
                            </clipPath>
                        </defs>
                    </svg>

                    <div class="dialog-suggestion-child">
                        <div class="dialog-suggestion-skeleton"></div>
                    </div>
                </button>
            {% endfor %}
        </div>
        <div class="dialog-input-wrapper">
            <div class="dialog-input-container">
                <input
                    id="dialog-ask-anything-input"
                    class="dialog-ask-anything-input"
                    placeholder="{{ "blocks.instant.ask-anything" | t }}">
            </div>
            <button
                class="dialog-input-submit"
                type="button"
                disabled
                id="send-message-button">
                <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </button>
        </div>
    </div>
</div>