<tr>
    <th scope="row">{{ labels.button_action }}</th>
    <td>
        <div v-for="(display, value) in button_action_options">
            <label>
                <input type="radio" name="button_action_options" :value="value" v-model="data.button_action" />
                {{ display }}
                <help-icon :help-text="help['button_action_options' + '_' + value]"></help-icon>
            </label>
        </div>
    </td>
</tr>
<tr v-if="data.button_action === 'element'">
    <th scope="row">{{ labels.button_action_element_selector }}</th>
    <td>
        <input type="text" class="regular-text" v-model="data.button_action_element_selector" />
        <help-icon :help-text="help.button_action_element_selector"></help-icon>
        <br />
        <a target="_blank" rel="noopener" href="https://wpfront.com/wordpress-plugins/scroll-top-plugin/scroll-top-plugin-faq/">{{ labels.button_action_element_how_to_link }}</a>
    </td>
</tr>
<tr v-if="data.button_action === 'element'">
    <th scope="row">{{ labels.button_action_container_selector }}</th>
    <td>
        <input type="text" class="regular-text" v-model="data.button_action_container_selector" />
        <help-icon :help-text="help.button_action_container_selector"></help-icon>
    </td>
</tr>
<tr v-if="data.button_action === 'element'">
    <th scope="row">{{ labels.button_action_element_offset }}</th>
    <td>
        <input type="text" class="small-text pixels" v-model="data.button_action_element_offset" />px
        <help-icon :help-text="help.button_action_element_offset"></help-icon>
    </td>
</tr>
<tr v-if="data.button_action === 'url'">
    <th scope="row">{{ labels.button_action_page_url }}</th>
    <td>
        <input type="text" class="regular-text" v-model="data.button_action_page_url" />
        <help-icon :help-text="help.button_action_page_url"></help-icon>
    </td>
</tr>