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

<div class="base-container">
    <form class="ui form" data-tea-action="$" data-tea-success="success">
        <csrf-token></csrf-token>
        
        <div class="config-section">
            <h4 class="section-title">
                <i class="pi pi-bell"></i>
                {{t('clusters_monitors_settings@提醒设置')}}
            </h4>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_settings@提醒连通性阈值')}}</div>
                <div class="item-content">
                    <div class="ui input right labeled">
                        <input type="text" maxlength="4" size="2" name="minNotifyConnectivity" v-model="setting.minNotifyConnectivity"/>
                        <span class="ui label">%</span>
                    </div>
                    <p class="comment">{{t('clusters_monitors_settings@取值0到100，当单个被监控对象连通性低于此值时（不包含此值）发送消息提醒。')}}<span v-if="setting.minNotifyConnectivity == 100">{{t('clusters_monitors_settings@100%表示只要有任何访问异常的情形都会发送提醒。')}}</span></p>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('clusters_monitors_settings@通知URL')}}</div>
                <div class="item-content">
                    <input type="text" name="notifyWebHookURL" maxlength="1000" v-model="setting.notifyWebHookURL" placeholder="https://..."/>
                    <p class="comment">{{t('clusters_monitors_settings@当达到连通性阈值时将监控对象的信息发送到此URL上。')}}</p>
                </div>
            </div>
        </div>
        
        <div class="margin"></div>
        <submit-btn></submit-btn>
    </form>
</div>