{{define "form/externalProxy"}}
<a-form layout="inline">
    <a-divider style="margin:0;"></a-divider>
    <a-form-item label="External Proxy">
    <a-switch v-model="externalProxy"></a-switch>
    <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
    </a-form-item>
    <table width="100%" class="ant-table-tbody" v-if="externalProxy" style="margin-bottom:5px">
        <tr style="line-height: 40px;">
            <td width="100%">
                <a-input-group style="margin: 0 5px;" compact v-for="(row, index) in inbound.stream.externalProxy">
                    <template>
                        <a-tooltip title="Force TLS">
                            <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
                                <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
                                <a-select-option value="none">{{ i18n "none" }}</a-select-option>
                                <a-select-option value="tls">TLS</a-select-option>
                            </a-select>
                        </a-tooltip>
                    </template>
                    <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
                    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
                        <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
                    </a-tooltip>
                    <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
                    <a-button style="width: 10%; margin: 0px" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
                </a-input-group>
            </td>
        </tr>
    </table>
</a-form>
{{end}}