{$layout}

{$var "header"}
<script src="/servers/certs/datajs" type="text/javascript"></script>
<script src="/js/sortable.min.js" type="text/javascript"></script>
{$end}

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

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

	<div class="right-box">
		<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
			<input type="hidden" name="clusterId" :value="clusterId"/>

			<div class="config-section">
				<div class="section-title">{{t('settings_doh_index@DoH设置')}}</div>
				<div class="config-item">
					<div class="item-label">{{t('settings_doh_index@启用DoH')}}</div>
					<div class="item-content">
						<p-switch name="isOn" v-model="dohConfig.isOn"></p-switch>
					</div>
				</div>
				<div class="config-item" v-show="dohConfig.isOn">
					<div class="item-label">{{t('settings_doh_index@绑定端口')}} *</div>
					<div class="item-content">
						<network-addresses-box :v-url="'/ns/addPortPopup'" :v-addresses="dohConfig.listen" :v-protocol="'tls'" :v-support-range="false"></network-addresses-box>
					</div>
				</div>
			</div>

			<!-- SSL配置 -->
			<ssl-config-box :v-ssl-policy="dohConfig.sslPolicy" :v-protocol="'tls'" v-show="dohConfig.isOn" style="margin-bottom: 1.5rem;"></ssl-config-box>

			<submit-btn></submit-btn>
		</form>
	</div>
</div>