<style include="settings-shared network-shared md-select">
#lockdown {
border-top: var(--cr-separator-line);
}
</style>
<!-- Always-on VPN enable/disable toggle -->
<div class="property-box">
<div class="start text-area" aria-hidden="true">
<div class="label" id="alwaysOnVpnEnableLabel">
$i18n{networkAlwaysOnVpnEnableLabel}
</div>
<div class="secondary" id="alwaysOnVpnEnableSublabel">
$i18n{networkAlwaysOnVpnEnableSublabel}
</div>
</div>
<cr-toggle id="alwaysOnVpnEnableToggle"
disabled="[[shouldDisableAlwaysOnVpn_(networks)]]"
checked="[[computeAlwaysOnVpnEnabled_(mode, networks)]]"
on-change="onAlwaysOnEnableChanged_"
aria-labelledby="alwaysOnVpnEnableLabel"
aria-describedby="alwaysOnVpnEnableSublabel">
</cr-toggle>
</div>
<!-- Always-on VPN options -->
<template is="dom-if" if="[[shouldShowAlwaysOnVpnOptions_(
mode, networks)]]">
<!-- Service selector -->
<div class="property-box indented two-line">
<div class="start text-area" aria-hidden="true">
<div class="label" id="alwaysOnVpnServiceLabel">
$i18n{networkAlwaysOnVpnService}
</div>
</div>
<select id="alwaysOnVpnServiceSelect"
class="md-select"
on-change="onAlwaysOnVpnServiceChanged_"
aria-labelledby="alwaysOnVpnServiceLabel">
<template is="dom-repeat" items="[[getAlwaysOnVpnListOptions_(
service, networks)]]">
<option value="[[item.value]]" selected="[[item.selected]]">
[[item.name]]
</option>
</template>
</select>
</div>
<!-- Lockdown toggle -->
<div id="lockdown" class="property-box indented two-line">
<div class="start text-area" aria-hidden="true">
<div class="label" id="alwaysOnVpnLockdownLabel">
$i18n{networkAlwaysOnVpnLockdownLabel}
</div>
<div class="secondary" id="alwaysOnVpnLockdownSublabel">
$i18n{networkAlwaysOnVpnLockdownSublabel}
</div>
</div>
<cr-toggle id="alwaysOnVpnLockdownToggle"
checked="[[computeAlwaysOnVpnLockdown_(mode)]]"
on-change="onAlwaysOnVpnLockdownChanged_"
aria-labelledby="alwaysOnVpnLockdownLabel"
aria-describedby="alwaysOnVpnLockdownSublabel">
</cr-toggle>
</div>
</template>