<div data-w-tab="General" class="sub-tab-content-area w-tab-pane w--tab-active" role="tabpanel" aria-labelledby="general-tab">
    <div class="tab-content-container">
        <h2 id="general-settings-heading">General Settings</h2>
        <div class="h3-wrapper">
            <h3 id="pulsecheck-settings-heading">PulseCheck Settings</h3>
        </div>
        <div class="subheading" id="pulsecheck-settings-description">Configure basic settings for your PulseCheck</div>
        <form id="general-settings" name="general-settings" method="get" class="form-column" aria-labelledby="general-settings-heading">
            <div class="w-layout-grid form-grid">

                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="pulsecheck-name" class="field-label">PulseCheck Name</label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="Enter a descriptive name for this PulseCheck. This name is for internal use only and won&#x27;t be shown to survey respondents. Choose something that helps your team identify the purpose or audience of this specific PulseCheck." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Enter a descriptive name for this PulseCheck. This name is for internal use only and won't be shown to survey respondents.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <input class="form-field w-input" maxlength="256" name="pulsecheck-name" placeholder="PulseCheck Name (e.g. Client Happiness)" type="text" id="pulsecheck-name" required aria-required="true">
                </div>

                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="audience-type" class="field-label">Audience Type</label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="Select the primary relationship your respondents have with your organization. This helps customize language throughout the PulseCheck survey to be more relevant to your specific audience. The audience type influences suggested question wording and email templates." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Select the primary relationship your respondents have with your organization.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <div id="audience-type" name="audience-type" data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="audience-type-label">
                        <div id="audience-type-label" class="dropdown-closed w-dropdown-toggle" aria-controls="audience-type-dropdown">
                            <div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
                            <div class="dropdown-text">{Selected audience type e.g. Customers / Clients}</div>
                        </div>
                        <div id="audience-type-dropdown" class="dropdown-open w-dropdown-list" role="listbox">
                            <div class="dropdown-options">

                                <!-- START Audience Type - Repeat for each Audience Type -->
                                <a class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        </div>
                                    </div>
                                    <div class="dropdown-option-text">{Audience Type Plural}</div>
                                </a>
                                <!-- END Audience Type -->

                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-field-container">

                    <div class="field-label-container">
                        <label for="tag" class="field-label" id="tag-label">Default Grouping</label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="Select a tag category to group and segment your survey results. This allows you to analyze feedback by organizational units like company, department, store location, or any other tag categories you&#x27;ve set up. You can change this grouping when viewing results without affecting the data collection." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Select a tag category to group and segment your survey results.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>


                    <div id="tag" name="tag" data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="tag-label">
                        <div class="dropdown-closed w-dropdown-toggle" aria-controls="tag-dropdown">
                            <div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
                            <div class="dropdown-text">{selected tag name}</div>
                        </div>
                        <div id="tag-dropdown" class="dropdown-open w-dropdown-list" role="listbox">
                            <div class="dropdown-options">

                                <a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        </div>
                                    </div>
                                    <div class="dropdown-option-text">None - Do not group</div> <!-- default -->
                                </a>

                                <!-- START Tags - Repeat for each Tag key -->

                                <a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="true">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon selected"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">{Tag Key/Name}</div>
                                </a>

                                <!-- END Tags -->

                            </div>
                        </div>
                    </div>
                </div>


                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="welcome-heading" class="field-label">Welcome Heading</label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="The main title that appears at the top of your PulseCheck survey. This is the first text respondents will see, so keep it brief, friendly, and clear. A good heading helps set expectations and encourages participation." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The main title that appears at the top of your PulseCheck survey.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <input class="form-field w-input" maxlength="256" name="welcome-heading" placeholder="We Value Your Feedback" type="text" id="welcome-heading" required aria-required="true" value="We Value Your Feedback">
                </div>


                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="welcome-message" class="field-label">Welcome Message</label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="This message appears below the welcome heading on your PulseCheck survey. Use this space to explain the purpose of the survey, how the feedback will be used, and approximately how long it will take to complete. A thoughtful message can significantly improve response rates." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: This message appears below the welcome heading on your PulseCheck survey.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <textarea id="welcome-message" name="welcome-message" maxlength="2000" placeholder="Thank you for taking a moment to share your thoughts. Your feedback helps us improve our service and provide you with the best experience possible." required aria-required="true" class="form-field text-area w-input">Thank you for taking a moment to share your thoughts. Your feedback helps us improve our service and provide you with the best experience possible.</textarea>
                </div>


                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="multi-language-toggle" class="field-label">Multi-Language Support</label>
                        <div data-tippy-content="Automatically translate your PulseCheck into multiple languages, including English, Spanish, French, Chinese, and more. All questions, headings, and response options are translated. PulseCheck detects the respondent's preferred language automatically from their browser, with a language selector as backup. Available on Pro plans only. See our website for the full list of supported languages." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Automatically translate your PulseCheck into multiple languages. Available on Pro plans only.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                        <a href="{open modal to upgrade subscription to Pro}" class="label-pro-icon w-inline-block" aria-label="Pro feature - click to upgrade">
                            <div data-tippy-content="This feature is only available on the Pro plan.">Pro</div>
                        </a>
                    </div>
                    <div class="toggle-field-container">
                        <a id="multi-language-toggle" name="multi-language" href="#" data-ix="toggle" data-toggle-state="disabled" class="toggle-button w-inline-block" role="switch" aria-checked="false" aria-disabled="true" tabindex="0" aria-label="Enable multi-language support"></a> <!-- disabled if not on pro plan -->
                    </div>
                </div>
            </div>


            <div class="space-1rem"></div>



            <div class="h3-wrapper">
                <h3 id="thank-you-settings">Post-Survey &quot;Thank You&quot; Page Settings</h3>
            </div>
            <div class="subheading" id="thank-you-description">Customize what respondents see after completing your PulseCheck based on their feedback score</div>


            <div class="w-layout-grid form-grid">

                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="ask-testimonials-toggle" class="field-label">Collect Testimonials</label>
                        <div data-tippy-content="Enable this option to display the Testimonial tab on the Thank You page. It allows highly satisfied respondents to submit a testimonial for future marketing use. Once a testimonial is submitted or if the conditions aren't met, this tab will no longer appear." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Enable this option to display the Testimonial tab on the Thank You page.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <div class="toggle-field-container">
                        <a id="ask-testimonials-toggle" name="ask-testimonials" href="#" data-ix="toggle" data-toggle-state="on" class="toggle-button w-inline-block" role="switch" aria-checked="true" tabindex="0" aria-label="Toggle collect testimonials"></a>
                    </div>
                </div>


                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="ask-reviews-toggle" class="field-label">Request Reviews</label>
                        <div data-tippy-content="Turn on this option to display the Reviews tab when review platforms are configured. This tab provides direct links to your organization's review pages (for example, the Google review form), so respondents can leave a review for your organization with one click." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Turn on this option to display the Reviews tab when review platforms are configured.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <div class="toggle-field-container">
                        <a id="ask-reviews-toggle" name="ask-reviews" href="#" data-ix="toggle" data-toggle-state="on" class="toggle-button w-inline-block" role="switch" aria-checked="true" tabindex="0" aria-label="Toggle request reviews"></a>
                    </div>
                </div>

            </div>


            <div class="space-2rem"></div>

            <div class="w-layout-grid form-grid">


                <div class="form-input-group" role="group" aria-labelledby="high-sat-testimonial-heading">
                    <div class="h4-wrapper">
                        <h4 id="high-sat-testimonial-heading">High Satisfaction Page - Testimonial Tab</h4>
                    </div>
                    <div class="subheading" id="high-sat-testimonial-description">Customize how you ask respondents who are very happy for a testimonial.</div>
                    <div class="form-input-group-inputs">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="testimonial-heading" class="field-label">Heading</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <input class="form-field w-input" maxlength="256" name="testimonial-heading" placeholder="Share Your Experience" type="text" id="testimonial-heading" required aria-required="true" value="Share Your Experience">
                        </div>
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="testimonial-message" class="field-label">Message</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <textarea id="testimonial-message" name="testimonial-message" maxlength="2000" placeholder="A quick testimonial from you would mean the world to us!" required aria-required="true" class="form-field text-area w-input">A quick testimonial from you would mean the world to us!</textarea>
                        </div>
                    </div>
                </div>


                <div class="form-input-group" role="group" aria-labelledby="high-sat-review-heading">
                    <div class="h4-wrapper">
                        <h4 id="high-sat-review-heading">High Satisfaction Page - Review Tab</h4>
                    </div>
                    <div class="subheading" id="high-sat-review-description">Customize how you ask respondents who are very happy for a review.</div>
                    <div class="form-input-group-inputs">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="review-heading" class="field-label">Heading</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <input class="form-field w-input" maxlength="256" name="review-heading" placeholder="Leave a Review" type="text" id="review-heading" required aria-required="true" value="Leave a Review">
                        </div>
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="review-message" class="field-label">Message</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <textarea id="review-message" name="review-message" maxlength="2000" placeholder="Your experience can help your peers, would you share it as a review?" required aria-required="true" class="form-field text-area w-input">Your experience can help your peers, would you share it as a review?</textarea>
                        </div>
                    </div>
                </div>


                <div class="form-input-group" role="group" aria-labelledby="high-sat-default-heading">
                    <div class="h4-wrapper">
                        <h4 id="high-sat-default-heading">High Satisfaction Page - No Review or Testimonial</h4>
                    </div>
                    <div class="subheading" id="high-sat-default-description">Customize the message for satisfied respondents when testiminial and review options are not available.</div>
                    <div class="form-input-group-inputs">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="high-sat-heading" class="field-label">Heading</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <input class="form-field w-input" maxlength="256" name="high-sat-heading" placeholder="We Appreciate Your Time!" type="text" id="high-sat-heading" required aria-required="true" value="We Appreciate Your Time!">
                        </div>
                        <div class="form-field-container">
                            <div class="field-label-container"><label for="high-sat-message" class="field-label">Message</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div><textarea id="high-sat-message" name="high-sat-message" maxlength="2000" placeholder="We truly appreciate your ongoing support. We welcome any additional thoughts you'd like to share, as your continued feedback helps us grow." required aria-required="true" class="form-field text-area w-input">We truly appreciate your ongoing support. We welcome any additional thoughts you'd like to share, as your continued feedback helps us grow.</textarea>
                        </div>
                    </div>
                </div>


                <div class="form-input-group" role="group" aria-labelledby="mixed-sat-heading-label">
                    <div class="h4-wrapper">
                        <h4 id="mixed-sat-heading-label">Mixed Feedback Page</h4>
                    </div>
                    <div class="subheading" id="mixed-sat-description">Customize the content for respondents with balanced or mixed feedback.</div>
                    <div class="form-input-group-inputs">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="mixed-sat-heading" class="field-label">Heading</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <input class="form-field w-input" maxlength="256" name="mixed-sat-heading" placeholder="Share Your Thoughts" type="text" id="mixed-sat-heading" required aria-required="true" value="Share Your Thoughts">
                        </div>
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="mixed-sat-message" class="field-label">Message</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <textarea id="mixed-sat-message" name="mixed-sat-message" maxlength="2000" placeholder="Thank you for taking the time to complete our survey. We'd appreciate hearing more about what you liked and any suggestions you might have." required aria-required="true" class="form-field text-area w-input">Thank you for taking the time to complete our survey. We'd appreciate hearing more about what you liked and any suggestions you might have.</textarea>
                        </div>
                    </div>
                </div>


                <div class="form-input-group" role="group" aria-labelledby="low-sat-heading-label">
                    <div class="h4-wrapper">
                        <h4 id="low-sat-heading-label">Low Satisfaction Page</h4>
                    </div>
                    <div class="subheading" id="low-sat-description">Set the message for respondents who had a less positive experience.</div>
                    <div class="form-input-group-inputs">
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="low-sat-heading" class="field-label">Heading</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <input class="form-field w-input" maxlength="256" name="low-sat-heading" placeholder="Help Us Improve" type="text" id="low-sat-heading" required aria-required="true" value="Help Us Improve">
                        </div>
                        <div class="form-field-container">
                            <div class="field-label-container">
                                <label for="low-sat-message" class="field-label">Message</label>
                                <div class="required-star" aria-hidden="true">*</div>
                            </div>
                            <textarea id="low-sat-message" name="low-sat-message" maxlength="2000" placeholder="" required="Thank you for taking the time to complete our survey. We're sorry your experience wasn't up to your expectations. Your honest feedback is crucial in helping us identify areas for improvement." aria-required="true" class="form-field text-area w-input">Thank you for taking the time to complete our survey. We're sorry your experience wasn't up to your expectations. Your honest feedback is crucial in helping us identify areas for improvement.</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

Translate the survey question provided between <question> tags into multiple languages.

Input:
<question>{Question text goes here}</question>

Output: a JSON array with each language represented as an object containing:
- "code": ISO language code
- "english_name": English name of the language  
- "translation": The translated question

Target languages: English (en), Chinese (zh), Spanish (es), French (fr), German (de), Japanese (ja), Korean (ko), Italian (it), Portuguese (pt), Dutch (nl), Russian (ru), Arabic (ar), Hindi (hi), Bengali (bn), Indonesian (id), Vietnamese (vi), Turkish (tr), Polish (pl), Ukrainian (uk), Swedish (sv), Norwegian (no), Danish (da), Finnish (fi), Greek (el), Hebrew (he), Filipino (fil), Cantonese (yue)

If translation is unavailable for any language, use the original English text.

Format example:
[
  {
    "code": "en",
    "english_name": "English",
    "translation": "Your survey question goes here"
  },
  {
    "code": "zh",
    "english_name": "Chinese",
    "translation": "你的问卷问题在这里"
  }
  // Include all target languages
]

Ensure the final JSON is syntactically correct.