{$layout}
{$template "/left_menu"}

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

    <warning-message v-if="!featureIsOn">尚未为当前用户开通此功能。</warning-message>

    {$ if .featureIsOn}
    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用]</a>后生效。</warning-message>

	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
		<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
		<table class="ui table selectable definition">
			<tr>
				<td class="title">已封禁</td>
				<td>
					<span v-if="countSelectedProvinces == 0" class="disabled">暂时没有选择封禁省份。</span>
					<div class="ui label tiny basic" v-for="province in provinces" v-if="province.isChecked" style="margin-bottom: 0.5em">
						<input type="hidden" name="provinceIds" :value="province.id"/>
						{{province.name}} <a href="" @click.prevent="deselectProvince(province)" title="取消封禁"><i class="icon remove"></i></a>
					</div>
				</td>
			</tr>
			<tr>
				<td>选择封禁区域</td>
				<td>

					<first-menu>
						<menu-item><more-options-indicator>选择省份/自治区</more-options-indicator></menu-item>
						<div class="item right" v-show="moreOptionsVisible">
							<div class="ui checkbox" @click.prevent="checkAll">
								<input type="checkbox" v-model="isCheckingAll"/>
								<label>全选</label>
							</div>
						</div>
					</first-menu>

					<div class="province-list" v-show="moreOptionsVisible" style="margin-top:0.5em">
						<div class="item" v-for="province in provinces">
							<div class="ui checkbox" @click.prevent="selectProvince(province)">
								<input type="checkbox" v-model="province.isChecked"/>
								<label>{{province.name}}</label>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</td>
			</tr>
		</table>
		<submit-btn></submit-btn>
	</form>
    {$end}
</div>