{$layout}


{$var "header"}
<script src="/js/sortable.min.js"></script>
<script src="./index.css"></script>
{$end}

{$template "/code_editor"}

<div class="custom-page">
	<!-- 顶部主分类Tab -->
	<div class="custom-main-tabs">
		<div v-for="main in mainTabs" :key="main.code" :class="['custom-main-tab', {active: main.active}]"
			@click="selectMainTab(main.code)">
			{{main.name}}
		</div>
	</div>
	<div class="custom-main-body">
		<!-- 左侧小分类菜单 -->
		<div class="custom-side-menu" v-if="['security', 'traffic', 'performance', 'page_route', 'enhancement'].includes(currentMainTab)">
			<div v-for="sub in sideMenus" :key="sub.code" :code="sub.code" :class="['custom-side-menu-item', {active: sub.active}]"
				@click="selectSideMenu(sub.code)">
				{{sub.name}}
			</div>
		</div>
		<!-- 右侧内容区 -->
		<div class="custom-content-area">
			<!-- 基础配置 -->
			<div class="custom-menu-main-box" v-if="currentMainTab === 'basic'">
				<basic-configuration
					v-if="allCode.includes('serverBasicSettings')"
					:server-id="server.id"
				></basic-configuration>
				<!-- 域名 -->
				<server-name-audit
					v-if="allCode.includes('serverNamesSettings')"
					:server-id="server.id"
				></server-name-audit>
				<!-- DNS -->
				<dns-cname-box
					v-if="allCode.includes('serverDnsSettings')"
					:server-id="server.id"
				></dns-cname-box>
				<!-- HTTP -->
				<http-config-box
					v-if="allCode.includes('serverHttpSettings')"
					:server-id="server.id"
				></http-config-box>
				<!-- HTTPS -->
				<https-config-box
					v-if="allCode.includes('serverHttpsSettings')"
					:server-id="server.id"
				></https-config-box>
				<!-- 源站 -->
				<reverse-proxy-details-box
					v-if="allCode.includes('serverReverseProxySettings')"
					:server-id="server.id"
				>
				</reverse-proxy-details-box>
				<udp-server-details-box
					v-if="allCode.includes('serverUdpSettings')"
					:server-id="server.id"
				></udp-server-details-box>
				<tls-server-details-box
					v-if="allCode.includes('serverTlsSettings')"
					:server-id="server.id"
				></tls-server-details-box>
				<tcp-server-details-box
					v-if="allCode.includes('serverTcpSettings')"
					:server-id="server.id"
				></tcp-server-details-box>
			</div>
			<!-- 安全防护 -->
			<div class="custom-menu-main-box" v-if="currentMainTab === 'security'">
				<uam-config-details-box v-if="currentSideMenu === 'serverUamSettings' && allCode.includes('serverUamSettings')" :server-id="server.id"></uam-config-details-box>
				<http-cc-config-details-box v-if="currentSideMenu === 'serverCcSettings' && allCode.includes('serverCcSettings')" :server-id="server.id"></http-cc-config-details-box>
				<defense-config-details-box v-if="currentSideMenu === 'serverDefenseSettings' && allCode.includes('serverDefenseSettings')" :server-id="server.id"></defense-config-details-box>
				<auth-details-box
					v-if="currentSideMenu === 'serverAccessSettings' && allCode.includes('serverAccessSettings')"
					:server-id="server.id"
				></auth-details-box>
				<referers-details-box
					v-if="currentSideMenu === 'serverReferersSettings' && allCode.includes('serverReferersSettings')"
					:server-id="server.id"
				></referers-details-box>
				<user-agent-details-box
					v-if="currentSideMenu === 'serverUserAgentSettings' && allCode.includes('serverUserAgentSettings')"
					:server-id="server.id"
				></user-agent-details-box>
			</div>
			<div class="custom-menu-main-box" v-if="currentMainTab === 'waf'">
				<waf-details-box
					v-if="currentSideMenu === 'serverWafSettings' && allCode.includes('serverWafSettings')"
					:server-id="server.id"
				></waf-details-box>
			</div>
			<!-- 性能优化 -->
			<div class="custom-menu-main-box" v-if="currentMainTab === 'performance'">
				<cache-details-box
					v-if="currentSideMenu === 'serverCacheSettings' && allCode.includes('serverCacheSettings')"
					:server-id="server.id"
				></cache-details-box>
				<compression-details-box
					v-if="currentSideMenu === 'serverCompressionSettings' && allCode.includes('serverCompressionSettings')"
					:server-id="server.id"
				></compression-details-box>
				<webp-details-box
					v-if="currentSideMenu === 'serverWebpSettings' && allCode.includes('serverWebpSettings')"
					:server-id="server.id"
				></webp-details-box>
				<optimization-details-box
					v-if="currentSideMenu === 'serverOptimizationSettings' && allCode.includes('serverOptimizationSettings')"
					:server-id="server.id"
				></optimization-details-box>
				<charset-details-box
					v-if="currentSideMenu === 'serverCharsetSettings' && allCode.includes('serverCharsetSettings')"
					:server-id="server.id"
				></charset-details-box>
				<web-root-details-box
					v-if="currentSideMenu === 'serverWebSettings' && allCode.includes('serverWebSettings')"
					:server-id="server.id"
				></web-root-details-box>
				<fastcgi-details-box
					v-if="currentSideMenu === 'serverFastcgiSettings' && allCode.includes('serverFastcgiSettings')"
					:server-id="server.id"
				></fastcgi-details-box>
		
			</div>
			<!-- 流量控制 -->
			<div class="custom-menu-main-box" v-if="currentMainTab === 'traffic'">
				<access-log-details-box
					v-if="currentSideMenu === 'serverAccessLogSettings' && allCode.includes('serverAccessLogSettings')"
					:server-id="server.id"
				></access-log-details-box>
				<stat-details-box
					v-if="currentSideMenu === 'serverStatSettings' && allCode.includes('serverStatSettings')"
					:server-id="server.id"
				></stat-details-box>
				<remote-addr-details-box
					v-if="currentSideMenu === 'serverRemoteAddrSettings' && allCode.includes('serverRemoteAddrSettings')"
					:server-id="server.id"
				></remote-addr-details-box>
				<request-limit-details-box
					v-if="currentSideMenu === 'serverRequestLimitSettings' && allCode.includes('serverRequestLimitSettings')"
					:server-id="server.id"
				></request-limit-details-box>
				<traffic-details-box
					v-if="currentSideMenu === 'serverTrafficSettings' && allCode.includes('serverTrafficSettings')"
					:server-id="server.id"
				></traffic-details-box>
			</div>
			<!-- 页面路由 -->
			<div class="custom-menu-main-box" v-if="currentMainTab === 'page_route'">
				<!-- url跳转 -->
				<host-redirect-details-box
					v-if="currentSideMenu === 'serverRedirectsSettings' && allCode.includes('serverRedirectsSettings')"
					:server-id="server.id"
				></host-redirect-details-box>
				<!-- 路由规则 -->
				<locations-details-box
					v-if="currentSideMenu === 'serverLocationSettings' && allCode.includes('serverLocationSettings')"
					:server-id="server.id"
				></locations-details-box>
				<!-- 重写规则 -->
				<rewrite-details-box
					v-if="currentSideMenu === 'serverRewriteSettings' && allCode.includes('serverRewriteSettings')"
					:server-id="server.id"
				></rewrite-details-box>
				<http-header-details-box
					v-if="currentSideMenu === 'serverHeadersSettings' && allCode.includes('serverHeadersSettings')"
					:server-id="server.id"
				></http-header-details-box>
				<!-- websocket -->
				<websocket-details-box
					v-if="currentSideMenu === 'serverWebsocketSettings' && allCode.includes('serverWebsocketSettings')"
					:server-id="server.id"
				></websocket-details-box>
				<!-- 自定义页面 -->
				<pages-and-shutdown-details-box
					v-if="currentSideMenu === 'serverPagesSettings' && allCode.includes('serverPagesSettings')"
					:server-id="server.id"
				></pages-and-shutdown-details-box>
			</div>
			<!-- 增强功能 -->
			<div class="custom-menu-main-box" v-if="currentMainTab === 'enhancement'">
				<hls-details-box
					v-if="currentSideMenu === 'serverMultimediaSettings' && allCode.includes('serverMultimediaSettings')"
					:server-id="server.id"
				></hls-details-box>
				<request-scripts-details-box
					v-if="currentSideMenu === 'serverRequestScriptsSettings' && allCode.includes('serverRequestScriptsSettings')"
					:server-id="server.id"
				></request-scripts-details-box>
				<common-details-box
					v-if="currentSideMenu === 'serverCommonSettings' && allCode.includes('serverCommonSettings')"
					:server-id="server.id"
				></common-details-box>
			</div>
		</div>
	</div>
</div>