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

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

    <div class="right-box">
        <div class="config-section">
            <div class="section-title">
                <i class="icon image outline"></i>
                {{t('clusters_cluster_settings_webp_index@WebP策略')}}
            </div>
            <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-item" v-show="!isGlobal">
                    <div class="item-label">{{t('clusters_cluster_settings_webp_index@使用全局配置')}}</div>
                    <div class="item-content">
                        <checkbox name="useGlobal" v-model="useGlobal"></checkbox>
                        <p class="comment">{{t('clusters_cluster_settings_webp_index@确定当前配置是否使用全局集群配置')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_settings_webp_index@启用WebP功能')}}</div>
                    <div class="item-content">
                        <checkbox name="isOn" :v-value="1" v-model="webpPolicy.isOn"></checkbox>
                        <p class="comment">{{t('clusters_cluster_settings_webp_index@选中后表示当前集群下的网站可以使用WebP转换功能')}}</p>
                    </div>
                </div>

                <div v-show="webpPolicy.isOn">
                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_webp_index@图片质量')}}</div>
                        <div class="item-content">
                            <div class="ui input right labeled">
                                <input type="text" name="quality" v-model="webpPolicy.quality" style="width: 5em" maxlength="4"/>
                                <span class="ui label">%</span>
                            </div>
                            <p class="comment">{{t('clusters_cluster_settings_webp_index@取值在0到100之间')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_webp_index@需要满足缓存条件')}}</div>
                        <div class="item-content">
                            <checkbox name="requireCache" :v-value="1" v-model="webpPolicy.requireCache"></checkbox>
                            <p class="comment">{{t('clusters_cluster_settings_webp_index@选中后表示图片URL需要满足缓存条件后才会转换')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_webp_index@可转换的最小尺寸')}}</div>
                        <div class="item-content">
                            <size-capacity-box :v-name="'minLengthJSON'" :v-value="webpPolicy.minLength"></size-capacity-box>
                            <p class="comment">{{t('clusters_cluster_settings_webp_index@不低于此尺寸的图像文件的才会转换')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('clusters_cluster_settings_webp_index@可转换的最大尺寸')}}</div>
                        <div class="item-content">
                            <size-capacity-box :v-name="'maxLengthJSON'" :v-value="webpPolicy.maxLength"></size-capacity-box>
                            <p class="comment">{{t('clusters_cluster_settings_webp_index@不高于此尺寸的图像文件的才会转换')}}</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>