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

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

    <div class="right-box">
        <first-menu>
            <menu-item><tip-icon :content="t('clusters_cluster_settings_toa_index@TOATipContent')"></tip-icon></menu-item>
            <a class="item" href="https://cdn1.com/docs/Node/toa.md" target="_blank">{{t('clusters_cluster_settings_toa_index@文档')}} &nbsp; <i class="icon external small"></i></a>
        </first-menu>

        <div class="config-section">
             <div class="section-title">
                 <i class="icon random"></i>
                 {{t('clusters_cluster_settings_toa_index@TOASettings')}}
            </div>
            <form method="post" class="ui form" data-tea-action="$" data-tea-success="success" id="xform">
                <input type="hidden" name="clusterId" :value="clusterId"/>
                <csrf-token></csrf-token>

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

                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_settings_toa_index@启用TOA')}}</div>
                    <div class="item-content">
                        <p-switch name="isOn" v-model="toa.isOn"></p-switch>
                        <p class="comment">{{t('clusters_cluster_settings_toa_index@在启用之前请确保当前集群下所有节点服务器安装并启用了nftables')}}</p>
                    </div>
                </div>

                <div v-show="toa.isOn">
                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_toa_index@IPv4选项类型数值')}}</div>
                        <div class="item-content">
                            <input type="text" name="optionTypeV4" v-model="toa.optionTypeV4" style="width:4em" maxlength="3"/>
                            <p class="comment">{{t('clusters_cluster_settings_toa_index@用来作为附加的IPv4TCPOPTION值')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_toa_index@IPv6选项类型数值')}}</div>
                        <div class="item-content">
                            <input type="text" name="optionTypeV6" v-model="toa.optionTypeV6" style="width:4em" maxlength="3"/>
                            <p class="comment">{{t('clusters_cluster_settings_toa_index@用来作为附加的IPv6TCPOPTION值')}}</p>
                        </div>
                    </div>

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

                <div v-show="toa.isOn && moreOptionsVisible">
                     <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_toa_index@自动配置')}}</div>
                        <div class="item-content">
                            <checkbox name="autoSetup" v-model="toa.autoSetup"></checkbox>
                            <p class="comment">{{t('clusters_cluster_settings_toa_index@TOA功能需要节点服务器安装并开启了nftables')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_toa_index@NFQueue队列开始ID')}}</div>
                        <div class="item-content">
                            <input type="text" name="minQueueId" v-model="toa.minQueueId" style="width:4em" maxlength="3"/>
                            <p class="comment">{{t('clusters_cluster_settings_toa_index@不能超过255')}}</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>
</div>