{$layout "layout_popup"}

<!-- <h3>添加规则集</h3> -->

<p class="ui message" v-if="isGlobalPolicy">{{t('waf_createSetPopup@全局策略提示')}}</p>

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<input type="hidden" name="groupId" :value="groupId"/>
    <input type="hidden" name="formType" :value="useCode ? 'code' : 'normal'"/>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">{{t('waf_createSetPopup@规则集名称_带星号')}}</td>
			<td>
				<input type="text" name="name" maxlength="100" ref="focus"/>
                <p class="comment">{{t('waf_createSetPopup@规则集用途描述')}}<a href="" @click.prevent="switchToCode"><span v-if="!useCode">{{t('waf_createSetPopup@使用代码')}}</span><span v-else>{{t('waf_createSetPopup@切换到常规表单')}}</span></a></p>
			</td>
		</tr>

        <!-- usual form -->
        <tbody v-show="!useCode">
            <tr>
                <td>{{t('waf_createSetPopup@规则_带星号')}}</td>
                <td>
                    <http-firewall-rules-box :v-rules="rules" :v-type="type"></http-firewall-rules-box>
                </td>
            </tr>
            <tr v-show="rules.length > 1">
                <td>{{t('waf_createSetPopup@规则之间关系_带星号')}}</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="connector"
                        v-model="selectedConnector"
                        @change="changeConnector()"
                        :options="[
                            ...connectors.map(connector => ({
                                label: connector.name,
                                value: connector.value,
                            }))
                        ]"
                    ></b-select>

                    <!-- <select class="ui dropdown" name="connector" style="width:10em" @change="changeConnector()" v-model="selectedConnector">
                        <option v-for="connector in connectors" :value="connector.value">{{connector.name}}</option>
                    </select> -->
                    <p class="comment">{{selectedConnectorDescription}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('waf_createSetPopup@执行动作_带星号')}}</td>
                <td>
                    <http-firewall-actions-box :v-actions="actions" :v-firewall-policy="firewallPolicy"  :v-group-type="type"></http-firewall-actions-box>
                </td>
            </tr>
            <tr>
                <td>{{t('waf_createSetPopup@允许局域网IP')}}</td>
                <td>
                    <checkbox name="ignoreLocal"></checkbox>
                    <p class="comment">{{t('waf_createSetPopup@跳过局域网IP提示')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('waf_createSetPopup@允许搜索引擎')}}</td>
                <td>
                    <checkbox name="ignoreSearchEngine"></checkbox>
                    <p class="comment">{{t('waf_createSetPopup@跳过搜索引擎提示')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- code form -->
        <tbody v-show="useCode">
            <tr>
                <td>{{t('waf_createSetPopup@规则集代码_带星号')}}</td>
                <td>
                    <textarea name="code" ref="codeInput" :placeholder="t('waf_createSetPopup@规则集代码_placeholder')" rows="20"></textarea>
                </td>
            </tr>
        </tbody>
	</table>
	<submit-btn></submit-btn>
</form>