{$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"/>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">终端名称 *</td>
            <td>
                <input type="text" name="name" maxlength="50" ref="focus" v-model="reporter.name"/>
            </td>
        </tr>
        <tr>
            <td>所属分组</td>
            <td>
                <report-node-groups-selector :v-group-ids="reporter.groupIds"></report-node-groups-selector>
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>区域</td>
                <td>
                    <input type="text" name="location" maxlength="50" v-model="reporter.location"/>
                    <p class="comment">终端所在地域。</p>
                </td>
            </tr>
            <tr>
                <td>网络提供商</td>
                <td>
                    <input type="text" name="isp" maxlength="50" v-model="reporter.isp"/>
                    <p class="comment">终端所属网络供应商。</p>
                </td>
            </tr>
            <tr>
                <td>允许的终端IP</td>
                <td>
                    <values-box name="allowIPs" :values="reporter.allowIPs"></values-box>
                    <p class="comment">如果不为空，则只有这些IP才能连接API。支持单个IP、CIDR格式的IP段和IP1-IP2这样的IP段。</p>
                </td>
            </tr>
            <tr>
                <td>是否启用</td>
                <td>
                    <checkbox name="isOn" v-model="reporter.isOn"></checkbox>
                </td>
            </tr>
        </tbody>
    </table>
    <submit-btn></submit-btn>
</form>