{$layout "layout_popup"}

<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('index_网络协议_0101')}}</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('index_端口_0101')}} *</td>
			<td>
				<input type="text" name="address" ref="focus" v-model="address"/>
                <p class="comment">{{t('index_可以是一个数字端口（通常不超过65535），也可以')}}<span v-if="supportRange">{{t('index_支持端口范围，形式为_0101')}}<code-label>port1-port2</code-label>。</span>
                    <span v-if="from.length == 0 && protocol == 'http'">{{t('index_HTTP常用端口为_0101')}}<a href="" title="点击添加" @click.prevent="addPort('80')">80</a>。</span>
                    <span v-if="from.length == 0 && protocol == 'https'">{{t('index_HTTPS常用端口为_0101')}}<a href="" title="点击添加" @click.prevent="addPort('443')">443</a>。</span>
                </p>
			</td>
		</tr>
	</table>
	<submit-btn></submit-btn>
</form>