{$layout "layout_popup"}

<h3 v-if="isCreating">添加URL跳转</h3>
<h3 v-if="!isCreating">修改URL跳转</h3>

<form class="ui form" data-tea-success="success" data-tea-action="$">
    <csrf-token></csrf-token>
    <input type="hidden" name="matchPrefix" :value="redirect.matchPrefix ? 1 : 0"/>
    <input type="hidden" name="matchRegexp" :value="redirect.matchRegexp ? 1 : 0"/>

    <table class="ui table definition selectable">
        <tr>
            <td class="title">跳转前URL *</td>
            <td>
                <input type="text" name="beforeURL" placeholder="比如 http://www.url1.com" v-model="redirect.beforeURL" ref="focus"/>
                <p class="comment">需要填写完整的URL，包括<code-label>http://</code-label>或者<code-label>https://</code-label>，如果有非默认端口，也需要带上端口号。</p>
            </td>
        </tr>
        <tr>
            <td>匹配模式</td>
            <td>
                <select class="ui dropdown auto-width" name="mode" v-model="mode">
                    <option value="equal">精准匹配</option>
                    <option value="matchPrefix">匹配前缀</option>
                    <option value="matchRegexp">正则匹配</option>
                </select>
                <p class="comment" v-if="mode == 'equal'">精准匹配跳转前的URL，即只有访问完全一样的URL才会跳转。</p>
                <p class="comment" v-if="mode == 'matchPrefix'">只要访问的URL头部部分包含跳转前URL，即可跳转。</p>
                <p class="comment" v-if="mode == 'matchRegexp'">可以在跳转前URL中使用正则表达式，然后可以在跳转后URL中使用正则表达式中括号的变量，比如<code-label>${1}</code-label>、<code-label>${2}</code-label>等。</p>
            </td>
        </tr>
        <tr v-if="mode == 'matchPrefix'">
            <td>是否保留URL路径参数</td>
            <td>
                <checkbox name="keepRequestURI" value="1" v-model="redirect.keepRequestURI"></checkbox>
                <p class="comment">选中后，则跳转之后，保留跳转之前的URL路径和参数。</p>
            </td>
        </tr>
        <tr>
            <td>跳转后URL *</td>
            <td>
                <input type="text" name="afterURL" placeholder="比如 https://www.url2.cn" v-model="redirect.afterURL"/>
                <p class="comment">需要填写完整的URL，包括<code-label>http://</code-label>或者<code-label>https://</code-label>，如果有非默认端口，也需要带上端口号。</p>
            </td>
        </tr>
        <tr>
            <td>跳转状态码</td>
            <td>
                <select class="ui dropdown auto-width" name="status" v-model="redirect.status">
                    <option value="0">[默认]</option>
                    <option v-for="status in statusList" :value="status.code">{{status.code}} - {{status.text}}</option>
                </select>
            </td>
        </tr>
    </table>

    <submit-btn></submit-btn>
</form>