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

<div class="left-right-box-container">
    <div class="right-box">
        <div class="config-section">
            <div class="section-title">
                <i class="icon info circle"></i>
                {{t('clusters_monitors_reporters_reporter@基本信息')}}
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@终端名称')}}</div>
                <div class="item-content">
                    {{reporter.name}}
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@状态')}}</div>
                <div class="item-content">
                    <span v-if="!reporter.isOn" class="red">{{t('clusters_monitors_reporters_reporter@禁用')}}</span>
                    <span v-else-if="!reporter.isActive" class="red">{{t('clusters_monitors_reporters_reporter@离线')}}</span>
                    <span v-else class="green">{{t('clusters_monitors_reporters_reporter@在线')}}</span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@所属分组')}}</div>
                <div class="item-content">
                    <div v-if="reporter.groups.length > 0">
                        <span v-for="group in reporter.groups" class="ui label basic tiny">{{group.name}}</span>
                    </div>
                    <span v-else class="disabled">{{t('clusters_monitors_reporters_reporter@全部分组')}}</span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@区域')}}</div>
                <div class="item-content">
                    <span v-if="reporter.location.length > 0">{{reporter.location}}</span>
                    <span v-else-if="reporter.status.location.length > 0" class="grey">{{reporter.status.location}}</span>
                    <span v-else class="disabled">{{t('clusters_monitors_reporters_reporter@没有设置')}}</span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@网络提供商')}}</div>
                <div class="item-content">
                    <span v-if="reporter.isp.length > 0">{{reporter.isp}}</span>
                    <span v-else-if="reporter.status.isp.length > 0" class="grey">{{reporter.status.isp}}</span>
                    <span v-else class="disabled">{{t('clusters_monitors_reporters_reporter@没有设置')}}</span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@允许的终端IP')}}</div>
                <div class="item-content">
                    <div v-if="reporter.allowIPs != null && reporter.allowIPs.length > 0">
                        <span v-for="ip in reporter.allowIPs" class="ui label tiny basic">{{ip}}</span>
                    </div>
                    <span v-else class="disabled">{{t('clusters_monitors_reporters_reporter@没有设置')}}</span>
                </div>
            </div>
            
            <div class="config-item" v-if="reporter.status.buildVersion.length > 0">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@版本号')}}</div>
                <div class="item-content">
                    v{{reporter.status.buildVersion}}
                </div>
            </div>
        </div>

        <div class="config-section">
            <div class="section-title">
                <i class="icon setting"></i>
                {{t('clusters_monitors_reporters_reporter@安装信息')}}
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@节点ID')}}</div>
                <div class="item-content">
                    {{reporter.uniqueId}}
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@节点Secret')}}</div>
                <div class="item-content">
                    {{reporter.secret}}
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@配置文件')}}</div>
                <div class="item-content">
                    configs/api_reporter.yaml&nbsp;
                    <download-link :v-element="'rpc-code'" :v-file="'api_reporter.yaml'">{{t('clusters_monitors_reporters_reporter@下载')}}</download-link>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_reporters_reporter@配置内容')}}</div>
                <div class="item-content">
                    <source-code-box id="rpc-code" type="text/yaml">rpc.endpoints: [{{apiEndpoints}}]
nodeId: "{{reporter.uniqueId}}"
secret: "{{reporter.secret}}"</source-code-box>
                </div>
            </div>
        </div>
    </div>
</div>