{$layout}
{$template "reporter_menu"}

<form class="ui form" data-tea-success="success" data-tea-action="$">
    <csrf-token></csrf-token>
    <input type="hidden" name="reporterId" :value="reporter.id" />

    <div class="left-right-box-container">
        <div class="right-box">
            <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@终端名称*')}}</div>
                    <div class="item-content">
                        <input type="text" name="name" maxlength="50" ref="focus" v-model="reporter.name" />
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('clusters_monitors_reporters_reporter@所属分组')}}</div>
                    <div class="item-content">
                        <report-node-groups-selector :v-group-ids="reporter.groupIds"></report-node-groups-selector>
                    </div>
                </div>
            </div>

            <div class="config-section">
                <div class="section-title">
                    <i class="icon cog"></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">
                        <input type="text" name="location" maxlength="50" v-model="reporter.location" />
                        <p class="comment">{{t('clusters_monitors_reporters_reporter@终端所在地域。')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('clusters_monitors_reporters_reporter@网络提供商')}}</div>
                    <div class="item-content">
                        <input type="text" name="isp" maxlength="50" v-model="reporter.isp" />
                        <p class="comment">{{t('clusters_monitors_reporters_reporter@终端所属网络供应商。')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('clusters_monitors_reporters_reporter@允许的终端IP')}}</div>
                    <div class="item-content">
                        <values-box name="allowIPs" :values="reporter.allowIPs"></values-box>
                        <p class="comment">{{t('clusters_monitors_reporters_reporter@如果不为空，则只有这些IP才能连接API。支持单个IP、CIDR格式的IP段和IP1-IP2这样的IP段。')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('clusters_monitors_reporters_reporter@启用当前终端')}}</div>
                    <div class="item-content">
                        <checkbox name="isOn" v-model="reporter.isOn"></checkbox>
                    </div>
                </div>
            </div>
            <submit-btn></submit-btn>
        </div>
    </div>

</form>