{$layout}
{$template "../settings_menu"}
{$template "/left_menu_with_menu"}
<div class="left-right-box-container">

	<div class="right-box">
		{$template "menu"}

		<div class="config-section">
			<div class="section-title">{{t('locations_create@创建新的路由规则')}}</div>

			<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
				<input type="hidden" name="webId" :value="webId"/>

				<div class="config-item">
					<div class="item-label">{{t('locations_create@路径匹配规则*')}}</div>
					<div class="item-content">
						<input type="text" name="pattern" maxlength="500" ref="focus" class="ui input"/>
						<p class="comment">{{t('locations_create@路径匹配规则提示')}}</p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('locations_create@匹配类型')}}</div>
					<div class="item-content">
						<b-select
							name="patternType"
							v-model="type"
							@change="changePatternType(type)"
							auto-width
							:options="[
								...patternTypes.map(patternType => ({
									label: patternType.name,
									value: patternType.type,
								}))
							]"
						></b-select>
						<p class="comment" v-if="selectedType != null" v-html="selectedType.description"></p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('locations_create@终止往下匹配')}}</div>
					<div class="item-content">
						<checkbox name="isBreak" :v-value="1"></checkbox>
						<p class="comment">{{t('locations_create@终止往下匹配提示')}}</p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('locations_create@名称')}}</div>
					<div class="item-content">
						<input type="text" name="name" maxlength="100" class="ui input"/>
						<p class="comment">{{t('locations_create@名称提示')}}</p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('locations_create@匹配条件')}}</div>
					<div class="item-content">
						<http-request-conds-box></http-request-conds-box>
					</div>
				</div>

				<!-- 更多选项 -->
				<div class="config-item">
					<div class="item-label">{{t('locations_create@更多选项')}}</div>
					<div class="item-content">
						<a href="" @click.prevent="moreOptionsVisible = !moreOptionsVisible" class="more-options-toggle">
							<i class="icon angle" :class="{down:!moreOptionsVisible, right:moreOptionsVisible}"></i>
							<span v-if="!moreOptionsVisible">{{t('locations_create@显示更多选项')}}</span>
							<span v-if="moreOptionsVisible">{{t('locations_create@收起选项')}}</span>
						</a>
					</div>
				</div>

				<div v-show="moreOptionsVisible">
					<div class="config-item">
						<div class="item-label">{{t('locations_create@专属域名')}}</div>
						<div class="item-content">
							<domains-box></domains-box>
							<p class="comment">{{t('locations_create@专属域名提示')}}</p>
						</div>
					</div>

					<div class="config-item">
						<div class="item-label">{{t('locations_create@不区分大小写')}}</div>
						<div class="item-content">
							<checkbox name="isCaseInsensitive" :v-value="1"></checkbox>
							<p class="comment">{{t('locations_create@不区分大小写提示')}}</p>
						</div>
					</div>

					<div class="config-item">
						<div class="item-label">{{t('locations_create@反向匹配')}}</div>
						<div class="item-content">
							<checkbox name="isReverse" :v-value="1"></checkbox>
							<p class="comment" v-html="t('locations_create@反向匹配提示')"></p>
						</div>
					</div>

					<div class="config-item">
						<div class="item-label">{{t('locations_create@描述')}}</div>
						<div class="item-content">
							<textarea rows="3" name="description" maxlength="200" class="ui input"></textarea>
						</div>
					</div>
				</div>
				<!-- / 更多选项 -->

				<div class="config-item">
					<div class="item-label"></div>
					<div class="item-content">
						<submit-btn></submit-btn>
					</div>
				</div>

			</form>
		</div>

	</div>
</div>