<div data-w-tab="Questions" class="sub-tab-content-area w-tab-pane" role="tabpanel" aria-labelledby="questions-tab">
    <div class="tab-content-container">
        <div class="tab-heading-container-for-button">
            <div>
                <h2 id="questions-heading">Questions</h2>
            </div>
            <div>
                <a href="{opens add question modal}" class="button w-inline-block" aria-label="Add Question" role="button">
                    <div>Add Question</div>
                </a>
            </div>
        </div>
        <div class="h3-wrapper">
            <h3 id="pulsecheck-questions-heading">PulseCheck Questions</h3>
        </div>
        <div class="subheading" id="pulsecheck-questions-description">Manage and customize your PulseCheck survey questions.</div>
        <form id="manage-questions" name="manage-questions" method="get" aria-labelledby="questions-heading">
            <div class="table-outline">
                <div class="table-scroll-container">
                    <table class="table" aria-labelledby="pulsecheck-questions-heading">
                        <thead class="table-head">
                            <tr class="table-header-row">
                                <th scope="col">
                                    <div class="table-cell-content">
                                        <div class="table-heading">Area</div>
                                    </div>
                                </th>
                                <th scope="col">
                                    <div class="table-cell-content">
                                        <div class="table-heading">Question</div>
                                    </div>
                                </th>
                                <th scope="col"> <!-- SORTED By THIS COLUMN -->
                                    <div class="table-cell-content _4rem">
                                        <div class="table-heading">Order</div>
                                    </div>
                                </th>
                                <th scope="col" class="action-column _9rem">
                                    <div class="table-header-icon-container">
                                        <a data-tippy-content="Add Question" href="{opens add question modal}" class="table-header-button w-inline-block" aria-label="Add Question">
                                            <div class="table-button-icon" aria-hidden="true">
                                                <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"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                            </div>
                                        </a>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="table-body">


                            <!-- START Question - repeat for each question -->
                            <tr class="table-row">
                                <td class="table-cell">
                                    <div class="table-cell-content">
                                        <div class="table-cell-left">
                                            <div class="table-data">{Area name - e.g. Helpdesk}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="table-cell truncate">
                                    <div class="table-cell-content">
                                        <div class="table-data overflow">{Question - e.g. How satisfied are you with the overall quality and timeliness of support provided by our Helpdesk?}</div>
                                    </div>
                                </td>

                                <td class="table-cell">
                                    <div class="table-cell-content">
                                        <div class="table-cell-left">
                                            <div class="table-data">{Sort position # e.g. 1}</div>
                                            <div>
                                                <!-- START Up Arrow - Clicking moves the row up in the sort order, table resorts based on order column --> 
                                                <button type="button" data-tippy-content="Move up" class="icon-sort-arrow" aria-label="Move question up in order">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32px" height="32px" viewbox="0 0 32 32" aria-hidden="true">
                                                        <polygon points="8,20 16,10 24,20 "></polygon>
                                                    </svg>
                                                </button>
                                                <!-- END Up Arrow -->

                                                <!-- START Down Arrow - Clicking moves the row down in the sort order, table resorts based on order column --> 
                                                <button type="button" data-tippy-content="Move down" class="icon-sort-arrow" aria-label="Move question down in order">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32px" height="32px" viewbox="0 0 32 32" aria-hidden="true">
                                                        <polygon points="24,12 16,22 8,12 "></polygon>
                                                    </svg>
                                                </button>
                                                <!-- END Down Arrow --> 
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td class="table-cell">
                                    <div class="table-row-action-button-container" role="group" aria-label="Question actions">

                                        <a href="{open manage translations modal}" data-tippy-content="Edit Translations" class="table-row-action-button" aria-label="Edit Translations">
                                            <div class="table-row-action-button-icon border" aria-hidden="true">
                                                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 -960 960 960" width="24px" fill="currentColor"><path d="m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z"></path></svg>
                                            </div>
                                        </a>

                                        <a href="{open edit question modal}" data-tippy-content="Edit" class="table-row-action-button" aria-label="Edit Question">
                                            <div class="table-row-action-button-icon" aria-hidden="true">
                                                <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"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
                                            </div>
                                        </a>

                                        <a href="{open delete question modal}" data-tippy-content="Delete" class="table-row-action-button danger" aria-label="Delete Question">
                                            <div class="table-row-action-button-icon" aria-hidden="true">
                                                <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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                            </div>
                                        </a>

                                    </div>
                                </td>
                            </tr>

                            <!-- END Question -->


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


            <div class="h3-wrapper">
                <h3 id="nps-section-heading">Net Promoter Score® Question</h3>
            </div>
            <div class="subheading" id="nps-section-description">Select your preferred NPS® question wording.</div>

            <div class="w-layout-grid form-grid">
                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="nps-question-select" id="nps-question-label" class="field-label">Net Promoter Score® Question</label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="This dropdown offers several variations of the standard Net Promoter Score question to better match your specific audience. Choose the wording that best resonates with your respondents&#x27; relationship to your organization, whether they&#x27;re customers, employees, members, or other stakeholders. All options use the same 0-10 scale and calculate NPS in the same way." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: This dropdown offers several variations of the standard Net Promoter Score question to better match your specific audience.">
                            <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="nps-question-select" name="nps-question" data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="nps-question-label">
                        <div class="dropdown-closed w-dropdown-toggle" aria-controls="nps-question-options">
                            <div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
                            <div class="dropdown-text">{Selected NPS Variant - e.g. On a scale of 0 to 10, how likely are you to recommend us to a friend or colleague?}</div>
                        </div>
                        <div id="nps-question-options" class="dropdown-open w-dropdown-list" role="listbox" aria-labelledby="nps-question-label">
                            <div class="dropdown-options">

                                <!-- START NPS Question Variant - repeat for each NPS Question variant --> 
                                <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" aria-hidden="true">
                                            <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"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        </div>
                                    </div>
                                    <div class="dropdown-option-text">{NPS Question Variant}</div>
                                </a>
                                <!-- END NPS Question Variant -->

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