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

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

    <div class="right-box">
        <first-menu>
            <menu-item :href="'.?clusterId=' + clusterId" class="active">{{t('ddos_protection_index@设置')}}</menu-item>
            <menu-item :href="'.status?clusterId=' + clusterId" >{{t('ddos_protection_index@状态')}}</menu-item>
        </first-menu>

        <div class="config-section">
            <div class="section-title">
                 <i class="icon shield alternate"></i>
                 {{t('ddos_protection_index@DDoS防护设置')}}
            </div>
            <form class="ui form" data-tea-action="$" data-tea-success="success">
                <csrf-token></csrf-token>
                <input type="hidden" name="clusterId" :value="clusterId"/>

                <div class="config-item" v-show="!isGlobal">
                    <div class="item-label">{{t('ddos_protection_index@使用全局配置')}}</div>
                    <div class="item-content">
                        <p-switch name="useGlobal" v-model="useGlobal"></p-switch>
                        <p class="comment">{{t('ddos_protection_index@确定当前配置是否使用全局集群配置勾选表面当前使用全局配置否则使用自定义配置')}}</p>
                    </div>
                </div>

                <!-- DDoS Protection Config Component -->
                <node-ddos-protection-config-box :v-ddos-protection-config="config" :v-default-configs="defaultConfigs" style="padding: 1rem;"></node-ddos-protection-config-box>

                <div class="config-item">
                    <div class="item-label"></div>
                    <div class="item-content">
                        <submit-btn></submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>