{$layout}
{$template "../settings_menu"}
{$template "/left_menu_with_menu"}

<div class="right-box with-menu">
  {$template "menu"} {$ if .featureIsOn}
  <second-menu>
    <a href="" class="item" @click.prevent="createGroup(type)">添加分组</a>
  </second-menu>

  <b-empty v-if="groups.length == 0">暂时还没有规则分组。</b-empty>

  <b-sortable-table
    v-if="groups.length > 0"
    :columns="columns"
    :data-source="groups"
    :row-key="'id'"
    :scroll="{ x: 800 }"
    :on-sort="handleSort"
  >
    <template slot="handleSlot" slot-scope="{ text, record }">
      <i class="icon bars grey handle" title="拖动排序"></i>
    </template>

    <template slot="nameSlot" slot-scope="{ text, record }">
      <a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">
        <span :class="{disabled:!record.isOn}">{{record.name}}</span>
      </a>
      <p class="comment" v-if="record.description.length > 0" style="padding-bottom: 0">
        {{record.description}}
      </p>
      <p style="margin-top: 0.5em">
        <span v-if="record.isOn" class="ui label tiny basic green">启用</span>
        <span v-if="!record.isOn" class="ui label tiny basic red">停用</span>
        <span v-if="record.code.length > 0" class="ui label basic tiny">预置</span>
        <span v-if="record.code.length == 0" class="ui label basic tiny">自定义</span>
      </p>
    </template>

    <template slot="countSetsSlot" slot-scope="{ text, record }">
      <a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">
        {{record.countSets}}
      </a>
    </template>

    <template slot="operationSlot" slot-scope="{ text, record }">
      <a-button type="link" :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">
        <i class="pi pi-eye" style="font-size: 12px; padding: 4px 2px;"></i> 详情
      </a-button>
      <a-button v-if="!record.isOn" type="link" @click.prevent="enableGroup(record.id)">
        <i class="pi pi-check" style="font-size: 12px; padding: 4px 2px;"></i> 启用
      </a-button>
      <a-button v-if="record.isOn" type="link" @click.prevent="disableGroup(record.id)">
        <i class="pi pi-times" style="font-size: 12px; padding: 4px 2px;"></i> 停用
      </a-button>
      <a-button v-if="record.canDelete" type="link" @click.prevent="deleteGroup(record.id)">
        <i class="pi pi-trash" style="font-size: 12px; padding: 4px 2px;"></i> 删除
      </a-button>
    </template>
  </b-sortable-table>

  <p class="comment" v-if="groups.length > 0">
    所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。
  </p>
  {$else}
  <server-feature-required></server-feature-required>
  {$end}
</div>
