{$layout}
{$template "recipient_menu"}
{$template "/code_editor"}

<table class="ui table definition selectable">
    <tr>
        <td class="title">{{t('admins_recipients_recipient@状态')}}</td>
        <td>
            <label-on :v-is-on="recipient.isOn"></label-on>
        </td>
    </tr>
    <tr>
        <td class="title">{{t('admins_recipients_recipient@系统用户')}}</td>
        <td>
            {{recipient.admin.fullname}} <span class="small grey">（{{recipient.admin.username}}）</span> <link-icon :href="'/admins/admin?adminId=' + recipient.admin.id"></link-icon>
        </td>
    </tr>
    <tr>
        <td>{{t('admins_recipients_recipient@媒介')}}</td>
        <td>
            {{recipient.instance.name}} <link-icon v-if="recipient.instance.id > 0" :href="'/admins/recipients/instances/instance?instanceId=' + recipient.instance.id"></link-icon>
            <p class="comment">{{recipient.instance.description}}</p>
        </td>
    </tr>
    <tr>
        <td>{{t('admins_recipients_recipient@接收人标识')}}</td>
        <td>
            <span v-if="recipient.user.length > 0">{{recipient.user}}</span>
            <span v-else class="disabled">-</span>
        </td>
    </tr>
    <tr>
        <td>{{t('admins_recipients_recipient@所属分组')}}</td>
        <td>
            <div v-if="recipient.groups != null && recipient.groups.length > 0">
                <div v-for="group in recipient.groups" class="ui label small basic">{{group.name}}</div>
            </div>
            <div v-else>
                <span class="disabled">-</span>
            </div>
        </td>
    </tr>
    <tr>
        <td>{{t('admins_recipients_recipient@发送时间')}}</td>
        <td>
            <span v-if="recipient.timeFrom.length > 0 && recipient.timeTo.length > 0">{{recipient.timeFrom}} - {{recipient.timeTo}}</span>
            <span v-else class="disabled">-</span>
        </td>
    </tr>
    <tr>
        <td>{{t('admins_recipients_recipient@备注')}}</td>
        <td>
            <span v-if="recipient.description.length > 0">{{recipient.description}}</span>
            <span v-else class="disabled">-</span>
        </td>
    </tr>
</table>

<b-settings-header>{{t('admins_recipients_recipient@关联的CDN集群')}}</b-settings-header>
<!-- <h4>关联的CDN集群</h4> -->
<div v-if="nodeClusters.length == 0">
    <b-empty>
        {{t('admins_recipients_recipient@暂时还没有关联的CDN集群。')}}
    </b-empty>
</div>
<div v-if="nodeClusters.length > 0">
    <table class="ui table selectable celled" style="width: 20em">
        <thead>
            <tr>
                <th>{{t('admins_recipients_recipient@集群名称')}}</th>
                <th class="one op">{{t('admins_recipients_recipient@操作')}}</th>
            </tr>
        </thead>
        <tr v-for="cluster in nodeClusters">
            <td>
                <a :href="'/clusters/cluster/settings/message?clusterId=' + cluster.id">{{cluster.name}}</a>
            </td>
            <td>
                <a href="" @click.prevent="deleteReceiver(cluster.receiverId)">{{t('admins_recipients_recipient@取消')}}</a>
            </td>
        </tr>
    </table>
</div>