{$layout "layout_popup"}

<!-- <h3>创建重写规则</h3> -->
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<input type="hidden" name="webId" :value="webId"/>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">匹配规则 *</td>
			<td>
				<input type="text" name="pattern" maxlength="500" placeholder="比如 /post/(.+)" ref="focus"/>
				<p class="comment">需要符合正则表达式规范，<a href="https://goedge.cloud/docs/Appendix/Regexp/Index.md" target="_blank">正则表达式语法 &raquo;</a></p>
			</td>
		</tr>
		<tr>
			<td>目标URL *</td>
			<td>
				<input type="text" name="replace" placeholder="比如 /post/${1}.html" maxlength="500"/>
                <p class="comment">URL中可以包含一些<a href="https://goedge.cloud/docs/Server/Variables.md" target="_blank">内置的变量</a>，并且可以用<code-label>${1}</code-label>、<code-label>${2}</code-label>等变量形式表示在匹配规则中匹配的第N个括号里的内容，也可以是一个完整的URL，比如：http://example.com/hello。</p>
			</td>
		</tr>
		<tr>
			<td>转发方式</td>
			<td>
				<b-select
					name="mode"
					v-model="rewriteRule.mode"
					auto-width
					:options="[
						{label: '隐式', value: 'proxy'},
						{label: '显式', value: 'redirect'},
					]"
				></b-select>

				<!-- <select class="ui dropdown auto-width" name="mode" v-model="rewriteRule.mode">
					<option value="proxy">隐式</option>
					<option value="redirect">显式</option>
				</select> -->
				<p class="comment">隐式表示不在客户端显示重写后的URL；显式表示在客户端跳转URL，将会显示重写后的URL。</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 v-show="rewriteRule.mode == 'redirect'">
				<td>跳转状态码</td>
				<td>
					<b-select
						name="redirectStatus"
						v-model="rewriteRule.redirectStatus"
						auto-width
						:options="[
							...statusOptions.map(status => ({
								label: (status.code??'') + ' ' + (status.text??''),
								value: status.code,
							}))
						]"
					></b-select>

					<!-- <select class="ui dropdown auto-width" name="redirectStatus" v-model="rewriteRule.redirectStatus">
						<option v-for="status in statusOptions" :value="status.code">{{status.code}} {{status.text}}</option>
					</select> -->
					<p class="comment">通常使用默认的307即可。</p>
				</td>
			</tr>
			<tr v-show="rewriteRule.mode == 'proxy'">
				<td>代理主机名</td>
				<td>
					<input type="text" name="proxyHost" placeholder="比如 example.com" maxlength="100"/>
					<p class="comment">如果转发的方式为隐式而且目标URL为不同的域名时需要用到此选项，用于修改被代理服务接收到的域名，默认和客户端请求的主机名一致，通常不必填写，支持<a href="https://goedge.cloud/docs/Server/Variables.md" target="_blank">请求变量</a>。</p>
				</td>
			</tr>
			<tr>
				<td>保留URL参数</td>
				<td>
					<checkbox name="withQuery" :v-value="1" checked="checked"></checkbox>
					<p class="comment">选中此选项，将会把用户输入的URL中的参数部分转发到目标URL上。</p>
				</td>
			</tr>
			<tr>
				<td>终止往下匹配</td>
				<td>
					<checkbox name="isBreak" :v-value="1"></checkbox>
					</div>
					<p class="comment">如果选中了此选项，一旦匹配成功，不会继续匹配其他的重写规则或路由规则。</p>
				</td>
			</tr>
			<tr>
				<td>启用当前重写规则</td>
				<td>
					<checkbox name="isOn" :v-value="1" checked="checked"></checkbox>
				</td>
			</tr>
		</tbody>
	</table>
	<submit-btn></submit-btn>
</form>