{{define "form/externalProxy"}}
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
    <a-form-item label='{{ i18n "pages.inbounds.stream.common.externalProxy" }}'>
        <a-button type="primary" style="margin-left: 10px" size="small"
        @click="inbound.stream.externalProxy.push(new ExternalProxy('same', location.hostname, inbound.port))">+</a-button>
    </a-form-item>
    <template style="margin: 5px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
        <a-divider :style="{ margin: '0' }">[[ index + 1 ]]
            <a-icon type="delete"
                @click="() => inbound.stream.externalProxy.splice(index, 1)"
                :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }">
            </a-icon>
        </a-divider>
        <a-input-group compact style="margin-bottom: 10px;">
            <a-tooltip title="{{ i18n "security" }}">
                <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>
            <a-tooltip title="{{ i18n "host" }}">
                <a-input v-model.trim="row.dest" style="width: 35%; border-radius: 0;" placeholder='{{ i18n "host" }}'></a-input>
            </a-tooltip>
            <a-tooltip title="{{ i18n "pages.inbounds.port" }}">
                <a-input-number v-model.number="row.port" style="width: 15%;" min="1" max="65535"></a-input-number>
            </a-tooltip>
            <a-tooltip title="{{ i18n "remark" }}">
                <a-input v-model.trim="row.remark" style="width: 30%;" placeholder='{{ i18n "remark" }}'></a-input>
            </a-tooltip>
        </a-input-group>
        <a-input-group compact v-if="row.forceTls === 'tls' || (row.forceTls === 'same' && inbound.stream.isTls)" style="margin-bottom: 10px;">
            <a-tooltip title='{{ i18n "pages.inbounds.stream.tls.uTLS" }}'>
                <a-select v-model="row.utls" 
                    style="width: 20%;"
                    :dropdown-class-name="themeSwitcher.currentTheme">
                    <a-select-option value=''>None</a-select-option>
                    <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
                </a-select>
            </a-tooltip>
            <a-tooltip title='{{ i18n "pages.inbounds.stream.tls.sniDesc" }}'>
                <a-input v-model.trim="row.sni" style="width: 35%; border-radius: 0;" placeholder='{{ i18n "pages.inbounds.stream.tls.sni" }}'></a-input>
            </a-tooltip>
            <a-tooltip title='{{ i18n "alpn" }}'>
                <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme"
                    v-model="row.alpn" style="width: 30%;">
                    <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
                </a-select>
            </a-tooltip>
            <a-tooltip title='{{ i18n "pages.inbounds.stream.tls.allowInsecure" }}'>
                <a-select v-model="row.allowInsecure" style="width: 15%;"
                    :dropdown-class-name="themeSwitcher.currentTheme">
                    <a-select-option value=''>False</a-select-option>
                    <a-select-option value='true'>True</a-select-option>
                </a-select>
            </a-tooltip>
        </a-input-group>
        <a-input-group compact style="margin-bottom: 10px;">
            <a-tooltip title="{{ i18n "pages.outbounds.fragment" }}">
                <a-checkbox v-model="row.hasFragment" style="width: 25%;height: 32px;">{{ i18n "pages.outbounds.fragment" }}</a-checkbox>
            </a-tooltip>
            <!-- Fragment -->
            <template v-if="row.fragment !== undefined">
                <a-tooltip title='{{ i18n "pages.outbounds.packets" }}'>
                    <a-input v-model.trim="row.fragment.packets" placeholder="tlshello" style="width: 25%; border-radius: 1rem 0 0 1rem;" />
                </a-tooltip>
                <a-tooltip title='{{ i18n "pages.outbounds.length" }}'>
                    <a-input v-model.trim="row.fragment.length" placeholder="100-200" style="width: 25%; border-radius: 0;" />
                </a-tooltip>
                <a-tooltip title='{{ i18n "pages.inbounds.stream.finalmask.delay" }}'>
                    <a-input v-model.trim="row.fragment.interval" placeholder="10-20" style="width: 25%; border-radius: 0 1rem 1rem 0;" />
                </a-tooltip>
            </template>
        </a-input-group>
    </template>
</a-form>
{{end}}