{$layout "layout_popup"}
<!-- <h3>添加自定义页面</h3> -->
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
    <input type="hidden" name="exceptURLPatternsJSON" :value="JSON.stringify(exceptURLPatterns)"/>
    <input type="hidden" name="onlyURLPatternsJSON" :value="JSON.stringify(onlyURLPatterns)"/>

	<table class="ui table selectable definition">
		<tr>
			<td class="title">{{t('pages_updatePopup@响应状态码')}} *</td>
			<td>
				<input type="text" name="status" size="3" :placeholder="t('pages_updatePopup@状态码')" maxlength="3" style="width:5.2em" ref="focus" v-model="statusCode"/>
                <p class="comment">{{t('pages_updatePopup@匹配的响应状态码比如404或者50x')}}</p>
			</td>
		</tr>
        <tr>
            <td>{{t('pages_updatePopup@内容类型')}} *</td>
            <td>
                <b-select
                    name="bodyType"
                    v-model="bodyType"
                    auto-width
                    :options="[
                        ...bodyTypes.map(bodyType => ({
                            label: bodyType.name,
                            value: bodyType.code,
                        }))
                    ]"
                ></b-select>
                
                <!-- <select class="ui dropdown auto-width" name="bodyType" v-model="bodyType">
                    <option v-for="bodyType in bodyTypes" :value="bodyType.code">{{bodyType.name}}</option>
                </select> -->
            </td>
        </tr>
        <tr v-show="bodyType == 'html'">
            <td>{{t('pages_updatePopup@显示页面HTML')}} *</td>
            <td>
                <textarea name="body" ref="htmlBody" rows="7"></textarea>
                <p class="comment"><a-tooltip v-if="codes.includes(statusCode)">
                    <template slot="title">
                        {{t('检测到状态码{0}，可以使用{0}模板', [statusCode])}}
                    </template>
                    <a href="" @click.prevent="addHTMLTemplate">[{{t('pages_updatePopup@使用模板')}}]</a>
                </a-tooltip><a v-else href="" @click.prevent="addHTMLTemplate">[{{t('pages_updatePopup@使用模板')}}]</a>。{{t('pages_updatePopup@填写页面的HTML内容支持请求变量')}}</p>
            </td>
        </tr>
        <tr v-if="bodyType == 'url'">
            <td>{{t('pages_updatePopup@显示页面URL')}} *</td>
            <td>
                <input type="text" name="url" maxlength="500" :placeholder="t('pages_updatePopup@类似于_example_com_page_html')"/>
                <p class="comment">{{t('pages_updatePopup@将从此URL中读取内容')}}</p>
            </td>
        </tr>
        <tr v-if="bodyType == 'redirectURL'">
            <td>{{t('pages_updatePopup@跳转到URL')}} *</td>
            <td>
                <input type="text" name="url" maxlength="500" :placeholder="t('pages_updatePopup@类似于_example_com_page_html')"/>
                <p class="comment">{{t('pages_updatePopup@将会跳转到此URL支持使用变量')}}</p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
		<tbody v-show="moreOptionsVisible">
            <tr>
                <td>{{t('pages_updatePopup@例外URL')}} &nbsp;<tip-icon :content="t('pages_updatePopup@对这些URL将不做任何限制')"></tip-icon></td>
                <td><url-patterns-box v-model="exceptURLPatterns"></url-patterns-box></td>
            </tr>
            <tr>
                <td>{{t('pages_updatePopup@限制URL')}} &nbsp;<tip-icon :content="t('pages_updatePopup@只对这些URL做限制')"></tip-icon></td>
                <td><url-patterns-box v-model="onlyURLPatterns"></url-patterns-box></td>
            </tr>
            <tr>
                <td>{{t('pages_updatePopup@新状态码')}}</td>
                <td>
                    <input type="text" name="newStatus" size="3" :placeholder="t('pages_updatePopup@状态码')" maxlength="3" style="width:5.2em"/>
                    <p class="comment">{{t('pages_updatePopup@可以用来修改响应的状态码不填表示不改变原有状态码')}}</p>
                </td>
            </tr>
        </tbody>
	</table>
	<submit-btn></submit-btn>
</form>