{$layout}
{$template "../menu"}

<second-menu>
    <menu-item @click.prevent="createGroup">[创建新分组]</menu-item>
</second-menu>

<p class="comment" v-if="groups.length == 0">暂时还没有分组。</p>
<div v-show="groups.length > 0">
    <div class="margin"></div>
    <table class="ui table selectable celled" id="sortable-table">
        <thead>
        <tr>
            <th style="width:3em"></th>
            <th>分组名称</th>
            <th class="center width10">服务数量</th>
            <th class="two op">操作</th>
        </tr>
        </thead>
        <tbody v-for="group in groups" :data-group-id="group.id">
        <tr>
            <td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
            <td>
                <a :href="'/servers/groups/group?groupId=' + group.id">{{group.name}}</a>
            </td>
            <td class="center">
                <a :href="'/servers?groupId=' + group.id" v-if="group.countServers > 0">{{group.countServers}}</a>
                <span v-else class="disabled">0</span>
            </td>
            <td>
                <a :href="'/servers/groups/group?groupId=' + group.id">详情</a> &nbsp; <a href="" @click.prevent="deleteGroup(group.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <p v-if="groups.length > 0" class="comment">可以拖动左侧的<i class="icon bars"></i>排序。</p>
</div>