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

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

  <!-- <h3>分组<a href="" @click.prevent="updateGroup(group.id)">[修改]</a></h3> -->
  <b-settings-header @action="updateGroup(group.id)" action-text="修改">
    分组
  </b-settings-header>

  <table class="ui table selectable definition">
    <tr>
      <td class="title">名称</td>
      <td>{{group.name}}</td>
    </tr>
    <tr>
      <td>描述</td>
      <td>
        <span v-if="group.description.length == 0" class="disabled"
          >暂时还没有描述。</span
        >
        <span v-if="group.description.length > 0">{{group.description}}</span>
      </td>
    </tr>
    <tr>
      <td>启用状态</td>
      <td>
        <label-on :v-is-on="group.isOn"></label-on>
      </td>
    </tr>
  </table>

  <!-- <h3 style="padding-top: 0.8em">
    规则集<a href="" @click.prevent="createSet(group.id)">[添加规则集]</a>
  </h3> -->
  <b-settings-header
    style="padding-top: 0.8em"
    @action="createSet(group.id)"
    action-text="添加"
  >
    规则集
  </b-settings-header>
  <!-- <p class="comment" v-if="sets == null || sets.length == 0">
    暂时还没有规则。
  </p> -->
  <b-empty v-if="sets == null || sets.length == 0">暂时还没有规则。</b-empty>
  <table
    class="ui table selectable celled"
    id="sortable-table"
    v-if="sets != null && sets.length > 0"
  >
    <thead>
      <tr>
        <th style="width: 3em"></th>
        <th nowrap="">规则集名称</th>
        <th nowrap="">规则</th>
        <th nowrap="" class="center" style="width: 6em">
          规则关系<tip-icon
            content="规则关系指的是<strong>单个规则集</strong>中的各个规则之间的关系，如果是“和(AND)”表示所有规则都必须满足条件，如果是“或(OR)”表示任一规则满足条件即可。<br/><br/>多个规则集之间没有任何关系，满足任一个规则集即停止向下匹配。"
          ></tip-icon>
        </th>
        <th nowrap="">动作</th>
        <th class="three op">操作</th>
      </tr>
    </thead>
    <tbody v-for="set in sets" :data-set-id="set.id">
      <tr :class="{warning: highlightedSetId == set.id}">
        <td style="text-align: center">
          <i class="icon bars handle grey"></i>
        </td>
        <td nowrap="">
          <a :name="'set' + set.id"></a
          ><a href="" @click.prevent="updateSet(set.id)"
            ><span :class="{disabled:!set.isOn}">{{set.name}}</span>
            <i class="icon expand small"></i>
          </a>
          <p style="margin-top: 0.5em">
            <label-on :v-is-on="set.isOn"></label-on>
          </p>
        </td>
        <td class="rules-box">
          <div
            v-for="rule in set.rules"
            style="margin-top: 0.4em; margin-bottom: 0.4em"
          >
            <http-firewall-rule-label :v-rule="rule"></http-firewall-rule-label>
          </div>
          <span class="ui disabled" v-if="set.rules.length == 0"
            >暂时还没有规则</span
          >
        </td>
        <td class="center">
          <span v-if="set.rules != null && set.rules.length > 1">
            <span v-if="set.connector.toUpperCase() == 'OR'">或</span
            ><span v-else>和</span>
            <span class="small grey">({{set.connector.toUpperCase()}})</span>
          </span>
          <span v-else class="disabled">-</span>
        </td>
        <td nowrap="">
          <http-firewall-actions-view
            :v-actions="set.actions"
          ></http-firewall-actions-view>
        </td>
        <td>
          <a href="" @click.prevent="updateSet(set.id)">修改</a> &nbsp;
          <a href="" @click.prevent="updateSetOn(set.id, false)" v-if="set.isOn"
            >停用</a
          ><a
            href=""
            @click.prevent="updateSetOn(set.id, true)"
            v-if="!set.isOn"
            ><span class="red">启用</span></a
          >
          &nbsp; <a href="" @click.prevent="deleteSet(set.id)">删除</a>
        </td>
      </tr>
    </tbody>
  </table>

  <p class="comment" v-if="group.sets != null && group.sets.length > 1">
    所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。
  </p>
</div>