{$layout}
{$template "menu"}

<div class="right-box">
    <div class="config-section">
        <div class="section-title">{{t('clusters_ipaddrs_addr@修改IP地址Title')}}</div>
        <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
            <csrf-token></csrf-token>
            <input type="hidden" name="addrId" :value="addr.id"/>
            <div class="config-item">
                <div class="item-label">{{t('clusters_ipaddrs_addr@IP地址Label')}} *</div>
                <div class="item-content">
                    <input type="text" name="ip" maxlength="128" ref="focus" v-model="addr.ip" class="ui input"/>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('clusters_ipaddrs_addr@允许公开访问Label')}}</div>
                <div class="item-content">
                    <checkbox name="canAccess" value="1" v-model="addr.canAccess"></checkbox>
                    <p class="comment">{{t('clusters_ipaddrs_addr@允许公开访问Comment')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('clusters_ipaddrs_addr@备注Label')}}</div>
                <div class="item-content">
                    <input type="text" name="name" maxlength="50" v-model="addr.name" class="ui input"/>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('clusters_ipaddrs_addr@在线状态Label')}}</div>
                <div class="item-content">
                    <b-select
                        name="isUp"
                        v-model="addr.isUp"
                        auto-width
                        :options="[
                            {label: t('clusters_ipaddrs@在线'), value: '1'},
                            {label: t('clusters_ipaddrs@离线'), value: '0'},
                        ]"
                    ></b-select>
                </div>
            </div>
            <div class="config-item" v-if="teaIsPlus && supportThresholds">
                <div class="item-label">{{t('clusters_ipaddrs_addr@阈值设置Label')}}</div>
                <div class="item-content">
                    <node-ip-address-thresholds-box :v-thresholds="addr.thresholds"></node-ip-address-thresholds-box>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('clusters_ipaddrs_addr@更多选项Label')}}</div>
                 <div class="item-content">
                    <a href="" @click.prevent="moreOptionsVisible = !moreOptionsVisible" class="more-options-toggle">
                        <i class="icon angle" :class="{down:!moreOptionsVisible, right:moreOptionsVisible}"></i>
                        <span v-if="!moreOptionsVisible">{{t('clusters_ipaddrs_addr@显示更多选项')}}</span>
                        <span v-if="moreOptionsVisible">{{t('clusters_ipaddrs_addr@收起选项')}}</span>
                    </a>
                </div>
            </div>
            <div v-show="moreOptionsVisible">
                <div class="config-item">
                    <div class="item-label">{{t('clusters_ipaddrs_addr@专属集群Label')}}</div>
                    <div class="item-content">
                        <node-ip-address-clusters-selector :v-clusters="clusters"></node-ip-address-clusters-selector>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('clusters_ipaddrs_addr@启用当前IPLabel')}}</div>
                    <div class="item-content">
                        <checkbox name="isOn" :v-value="1" v-model="addr.isOn"></checkbox>
                        <p class="comment">{{t('clusters_ipaddrs_addr@启用当前IPComment')}}</p>
                    </div>
                </div>
            </div>
             <div class="config-item">
                 <div class="item-label"></div>
                 <div class="item-content">
                     <submit-btn></submit-btn>
                 </div>
            </div>
        </form>
    </div>
</div>