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

<second-menu>
    <menu-item @click.prevent="createGroup"><i class="pi pi-plus" style="font-size: 12px; margin-right: 0.5em;"></i>{{t('clusters_monitors_groups@添加分组')}}</menu-item>
</second-menu>

<b-empty v-if="groups.length == 0">
	{{t('clusters_monitors_groups@暂时还没有分组')}}
</b-empty>

<b-table
    v-if="groups.length > 0"
    :columns="[
        {
            title: t('clusters_monitors_groups@分组名称'),
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: t('clusters_monitors_groups@操作'),
            key: 'action',
            width: '150px',
            scopedSlots: { customRender: 'actionSlot' }
        }
    ]"
    :data-source="groups"
    :row-key="'id'"
    :bordered="false"
    :pagination="false"
>
    <template slot="actionSlot" slot-scope="{ text, record }">
        <a href="" @click.prevent="updateGroup(record.id)">{{t('clusters_monitors_groups@修改')}}</a> &nbsp;
        <a href="" @click.prevent="deleteGroup(record.id)">{{t('clusters_monitors_groups@删除')}}</a>
    </template>
</b-table>