{$layout "layout_popup"}

<!-- <h3>{{t('clusters_cluster_settings_message_selectReceiverPopup@选择接收人_h3')}}</h3> -->


<form class="ui form">
    <table class="ui table definition">
        <tr>
            <td class="title">{{t('clusters_cluster_settings_message_selectReceiverPopup@选择接收人')}}</td>
            <td>
                <div v-if="recipients.length == 0">
                    <span class="disabled">{{t('clusters_cluster_settings_message_selectReceiverPopup@暂时没有接收人')}}</span>
                </div>
                <div v-else>
                    <a class="ui label small basic" :class="{blue: selectedRecipient != null && recipient.id == selectedRecipient.id}" v-for="recipient in recipients" @click.prevent="selectRecipient(recipient)">
                        {{recipient.name}} &nbsp; <span class="small grey">({{recipient.instanceName}})</span>
                    </a>
                </div>
            </td>
        </tr>
        <tr>
            <td>{{t('clusters_cluster_settings_message_selectReceiverPopup@选择接收人分组')}}</td>
            <td>
                <div v-if="groups.length == 0">
                    <span class="disabled">{{t('clusters_cluster_settings_message_selectReceiverPopup@暂时没有接收人分组')}}</span>
                </div>
                <div v-else>
                   <a class="ui label small basic" :class="{blue: selectedGroup != null && group.id == selectedGroup.id}" v-for="group in groups" @click.prevent="selectGroup(group)">
                        {{t('clusters_cluster_settings_message_selectReceiverPopup@分组')}}：{{group.name}}
                   </a>
                </div>
            </td>
        </tr>
    </table>
    <button type="button" class="ui button primary" @click.prevent="confirm">{{t('clusters_cluster_settings_message_selectReceiverPopup@确定')}}</button>
</form>