{$layout}
{$template "menu"}
{$template "/left_menu_with_menu"}

<div class="left-right-box-container">

    <div class="right-box">
        <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
            <csrf-token></csrf-token>
            <input type="hidden" name="clusterId" :value="cluster.id"/>

            <div class="config-section">
                <div class="section-title">{{t('settings_index@集群基本设置')}}</div>

                <div class="config-item">
                    <div class="item-label">{{t('settings_index@集群名称')}} *</div>
                    <div class="item-content">
                        <input type="text" name="name" maxlength="50" ref="focus" v-model="cluster.name"/>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('settings_index@管理员电子邮箱')}} *</div>
                    <div class="item-content">
                        <input type="text" name="email" :placeholder="t('settings_index@比如joeexampleorg')" v-model="cluster.email"/>
                        <p class="comment">{{t('settings_index@域名管理员电子邮箱地址')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('settings_index@DNS主机域名')}}</div>
                    <div class="item-content">
                        <values-box name="hosts" :placeholder="t('settings_index@比如ns1examplecom')" :v-values="cluster.hosts"></values-box>
                        <p class="comment">{{t('settings_index@DNS主机域名说明')}}<code-label>ns1.example.com</code-label>；{{t('settings_index@需要确保这些域名已经解析到集群节点')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('settings_index@更多选项')}}</div>
                    <div class="item-content">
                        <more-options-indicator></more-options-indicator>
                    </div>
                </div>

                <div v-show="moreOptionsVisible">
                    <div class="config-item">
                        <div class="item-label">{{t('settings_index@时区')}}</div>
                        <div class="item-content">
                            <div class="ui fields inline">
                                <div class="ui field">
                                    <b-select
                                        v-model="timeZoneGroupCode"
                                        :options="[
                                            ...timeZoneGroups.map(timeZoneGroup => ({
                                                label: timeZoneGroup.name,
                                                value: timeZoneGroup.code,
                                            }))
                                        ]"
                                    ></b-select>
                                </div>
                                <div class="ui field">
                                    <b-select
                                        name="timeZone"
                                        v-model="cluster.timeZone"
                                        :options="[
                                            ...timeZoneLocations.filter(loc => loc.group === timeZoneGroupCode).map(timeZoneLocation => ({
                                                label: t('settings_index@时区地点偏移', [timeZoneLocation.name, timeZoneLocation.offset]),
                                                value: timeZoneLocation.name,
                                            }))
                                        ]"
                                    ></b-select>
                                </div>
                            </div>
                            <p class="comment">{{t('settings_index@节点记录日志使用的时区')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="autoRemoteStart" v-model="cluster.autoRemoteStart">{{t('settings_index@自动远程启动')}}</checkbox>
                            <p class="comment">{{t('settings_index@自动远程启动说明')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="detectAgents" v-model="cluster.detectAgents">{{t('settings_index@监测搜索引擎')}}</checkbox>
                            <p class="comment">{{t('settings_index@监测搜索引擎说明')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="checkingPorts" v-model="cluster.checkingPorts">{{t('settings_index@自动检测端口')}}</checkbox>
                            <p class="comment">{{t('settings_index@自动检测端口说明')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="isOn" :v-value="1" v-model="cluster.isOn">{{t('settings_index@启用当前集群')}}</checkbox>
                        </div>
                    </div>
                </div>
            </div>
            <submit-btn>{{t('settings_index@保存设置')}}</submit-btn>
        </form>
    </div>
</div>