{$layout "layout_popup"}

<!-- <h3 v-if="!isUpdating">{{t('ns_addPortPopup@添加端口绑定')}}</h3> -->
<!-- <h3 v-if="isUpdating">{{t('ns_addPortPopup@修改端口绑定')}}</h3> -->
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
    <input type="hidden" name="supportRange" :value="supportRange ? 1 : 0"/>
	<table class="ui table definition selectable">
		<tr>
			<td>{{t('ns_addPortPopup@网络协议')}}</td>
			<td>
				<b-select
					name="protocol"
					v-model="protocol"
					@change="changeProtocol"
					auto-width
					:options="[
						...protocols.map(p => ({
							label: p.name,
							value: p.code,
						}))
					]"
				></b-select>

				<!-- <select class="ui dropdown auto-width" name="protocol" v-model="protocol" @change="changeProtocol">
					<option v-for="p in protocols" :value="p.code">{{p.name}}</option>
				</select> -->
			</td>
		</tr>
		<tr>
			<td class="title">{{t('ns_addPortPopup@端口*')}}</td>
			<td>
				<input type="text" name="address" ref="focus" v-model="address"/>
                <p class="comment">{{t('ns_addPortPopup@端口说明')}}<span v-if="supportRange">{{t('ns_addPortPopup@支持端口范围提示')}}<code-label>port1-port2</code-label>。</span>
                    <span v-if="from.length == 0 && protocol == 'http'">{{t('ns_addPortPopup@HTTP常用端口提示')}}<a href="" :title="t('ns_addPortPopup@点击添加Title')" @click.prevent="addPort('80')">80</a>。</span>
                    <span v-if="from.length == 0 && protocol == 'https'">{{t('ns_addPortPopup@HTTPS常用端口提示')}}<a href="" :title="t('ns_addPortPopup@点击添加Title')" @click.prevent="addPort('443')">443</a>。</span>
                </p>
			</td>
		</tr>
	</table>
	<submit-btn></submit-btn>
</form>