{$layout}
{$template "../settings_menu"}

<div class="left-right-box-container">
	{$template "/left_menu"}

	<div class="right-box">
		{$template "menu"}
		<div class="margin"></div>
		<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
			<input type="hidden" name="webId" :value="webId"/>
			<table class="ui table selectable definition">
				<tr>
					<td>路径匹配规则 *</td>
					<td>
						<input type="text" name="pattern" maxlength="500" ref="focus"/>
						<p class="comment">路径通常以斜杠(/)开头，比如/hello。如果匹配类型是正则表达式匹配，则可以是一个正则表达式</p>
					</td>
				</tr>
				<tr>
					<td>匹配类型</td>
					<td>
						<b-select
							name="patternType"
							v-model="type"
							@change="changePatternType(type)"
							auto-width
							:options="[
								...patternTypes.map(patternType => ({
									label: patternType.name,
									value: patternType.type,
								}))
							]"
						></b-select>

						<!-- <select class="ui dropdown auto-width" name="patternType" v-model="type" @change="changePatternType(type)">
							<option v-for="patternType in patternTypes" :value="patternType.type">{{patternType.name}}</option>
						</select> -->
						<p class="comment" v-if="selectedType != null" v-html="selectedType.description"></p>
					</td>
				</tr>
				<tr>
					<td>终止往下匹配</td>
					<td>
						<checkbox name="isBreak" :v-value="1"></checkbox>
						<p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的路由规则。</p>
					</td>
				</tr>
				<tr>
					<td class="title">名称</td>
					<td>
						<input type="text" name="name" maxlength="100"/>
						<p class="comment">可以用来说明此规则用途。。</p>
					</td>
				</tr>
							<tr>
									<td>匹配条件</td>
									<td>
											<http-request-conds-box></http-request-conds-box>
									</td>
							</tr>
				<tr>
					<td colspan="2"><more-options-indicator></more-options-indicator></td>
				</tr>
				<tbody v-show="moreOptionsVisible">
									<tr>
											<td>专属域名</td>
											<td>
													<domains-box></domains-box>
													<p class="comment">默认不需要填写，表示支持所有域名。如果填写了专属域名，表示当前路由规则只会在所列的专属域名被访问时才生效。</p>
											</td>
									</tr>
					<tr>
						<td>不区分大小写</td>
						<td>
							<checkbox name="isCaseInsensitive" :v-value="1"></checkbox>
							<p class="comment">选中表示匹配规则中的路径中的英文字母不区分大小写。</p>
						</td>
					</tr>
					<tr>
						<td>反向匹配</td>
						<td>
							<checkbox name="isReverse" :v-value="1"></checkbox>
							<p class="comment">选中表示匹配所有<strong>不符合规则</strong>的路径。</p>
						</td>
					</tr>
					<tr>
						<td>描述</td>
						<td>
							<textarea rows="3" name="description" maxlength="200"></textarea>
						</td>
					</tr>
				</tbody>
			</table>
			<submit-btn></submit-btn>
		</form>
	</div>
</div>