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

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

    <div class="right-box">
        {$template "menu"}

        <form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
            <csrf-token></csrf-token>
            <input type="hidden" name="clusterId" :value="clusterId"/>
            <div class="config-section">
                <div class="section-title">{{t('clusters_cluster_settings_http3_index@HTTP3设置')}}</div>
                <div class="config-item" v-show="!isGlobal">
                    <div class="item-label">{{t('clusters_cluster_settings_http3_index@使用全局配置')}}</div>
                    <div class="item-content">
                        <p-switch name="useGlobal" v-model="useGlobal"></p-switch>
                        <p class="comment">{{t('clusters_cluster_settings_http3_index@确定当前配置是否使用全局集群配置')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-content">
                        <checkbox name="isOn" v-model="http3Policy.isOn">{{t('clusters_cluster_settings_http3_index@启用HTTP3功能')}}</checkbox>
                        <p class="comment">{{t('clusters_cluster_settings_http3_index@选中后表示当前集群下的网站可以使用HTTP3功能')}}</p>
                    </div>
                </div>
                
                <div v-show="http3Policy.isOn">
                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_http3_index@UDP端口')}}</div>
                        <div class="item-content">
                            <input type="text" style="width: 5em" maxlength="4" name="port" v-model="http3Policy.port"/>
                            <p class="comment">{{t('clusters_cluster_settings_http3_index@HTTP3通讯使用的UDP端口')}}</p>
                        </div>
                    </div>
                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="supportMobileBrowsers" v-model="http3Policy.supportMobileBrowsers">{{t('clusters_cluster_settings_http3_index@支持手机浏览器')}}</checkbox>
                            <p class="comment">{{t('clusters_cluster_settings_http3_index@在手机浏览器上也尝试开启HTTP3')}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <submit-btn></submit-btn>
        </form>
    </div>
</div>