<style include="network-shared cr-hidden-style iron-flex iron-flex-alignment md-select">
network-proxy-input {
margin-bottom: 10px;
}
network-proxy-exclusions {
margin: 10px 0;
}
#addException {
margin-top: 10px;
}
#manualProxy {
padding-inline-start: var(--cr-section-padding);
}
#proxyType {
width: 320px;
}
</style>
<!-- Proxy type dropdown -->
<div class="property-box">
<div class="start">[[i18n('networkProxyConnectionType')]]</div>
<select id="proxyType" class="md-select" on-change="onTypeChange_"
value="[[proxy_.type.activeValue]]"
disabled="[[!isEditable_('type', managedProperties, editable,
useSharedProxies)]]"
aria-label="[[i18n('networkProxyConnectionType')]]">
<template is="dom-repeat" items="[[proxyTypes_]]">
<option value="[[item]]">[[getProxyTypeDesc_(item)]]</option>
</template>
</select>
</div>
<!-- Autoconfiguration (PAC) -->
<div class="property-box indented"
hidden$="[[!matches_(proxy_.type.activeValue, 'PAC')]]">
<cr-input id="pacInput" class="flex"
label="[[i18n('networkProxyAutoConfig')]]"
value="{{proxy_.pac.activeValue}}" on-change="onPACChange_"
disabled="[[!isEditable_('pac', managedProperties, editable,
useSharedProxies)]]">
</cr-input>
</div>
<!-- Web Proxy Auto Discovery (WPAD) -->
<div class="property-box indented"
hidden$="[[!matches_(proxy_.type.activeValue, 'WPAD')]]">
<div>[[i18n('networkProxyWpad')]]</div>
<div class="middle">[[wpad_]]</div>
</div>
<!-- Manual -->
<div class="property-box indented"
hidden$="[[!matches_(proxy_.type.activeValue, 'Manual')]]">
<div id="networkProxyToggleLabel" class="flex">
[[i18n('networkProxyUseSame')]]
</div>
<cr-toggle checked="{{useSameProxy_}}"
disabled="[[!isEditable_('type', managedProperties, editable,
useSharedProxies)]]"
aria-labelledby="networkProxyToggleLabel">
</cr-toggle>
</div>
<div id="manualProxy" class="layout vertical start"
hidden$="[[!matches_(proxy_.type.activeValue, 'Manual')]]">
<div hidden$="[[!useSameProxy_]]" class="layout vertical">
<network-proxy-input
id="sameProxyInput"
on-proxy-input-change="onProxyInputChange_"
editable="[[isEditable_('manual.httpProxy.host', managedProperties,
editable, useSharedProxies)]]"
value="{{proxy_.manual.httpProxy}}"
label="[[i18n('networkProxy')]]">
</network-proxy-input>
</div>
<div hidden$="[[useSameProxy_]]" class="layout vertical">
<network-proxy-input
id="httpProxyInput"
on-proxy-input-change="onProxyInputChange_"
editable="[[isEditable_('manual.httpProxy.host', managedProperties,
editable, useSharedProxies)]]"
value="{{proxy_.manual.httpProxy}}"
label="[[i18n('networkProxyHttp')]]">
</network-proxy-input>
<network-proxy-input
id="secureHttpProxyInput"
on-proxy-input-change="onProxyInputChange_"
editable="[[isEditable_('manual.secureHttpProxy.host',
managedProperties, editable, useSharedProxies)]]"
value="{{proxy_.manual.secureHttpProxy}}"
label="[[i18n('networkProxyShttp')]]">
</network-proxy-input>
<network-proxy-input
id="socksProxyInput"
on-proxy-input-change="onProxyInputChange_"
editable="[[isEditable_('manual.socks.host', managedProperties,
editable, useSharedProxies)]]"
value="{{proxy_.manual.socks}}"
label="[[i18n('networkProxySocks')]]">
</network-proxy-input>
</div>
<div hidden="[[!isEditable_('type', managedProperties, editable,
useSharedProxies)]]">
<div>[[i18n('networkProxyExceptionList')]]</div>
<network-proxy-exclusions
on-proxy-exclusions-change="onProxyExclusionsChange_"
exclusions="{{proxy_.excludeDomains.activeValue}}"
editable="[[isEditable_('excludeDomains', managedProperties,
editable, useSharedProxies)]]">
</network-proxy-exclusions>
<div id="addException" class="layout horizontal center">
<cr-input id="proxyExclusion" class="flex"
value="{{proxyExclusionInputValue_}}"
aria-label="[[i18n('networkProxyExceptionInputA11yLabel')]]"
on-keypress="onAddProxyExclusionKeypress_">
<cr-button id="proxyExclusionButton"
on-click="onAddProxyExclusionTap_"
slot="suffix"
disabled="[[shouldProxyExclusionButtonBeDisabled_(
proxyExclusionInputValue_)]]">
[[i18n('networkProxyAddException')]]
</cr-button>
</cr-input>
</div>
</div>
<cr-button id="saveManualProxy"
on-click="onSaveProxyTap_" class="action-button"
disabled="[[!isSaveManualProxyEnabled_(managedProperties,
proxyIsUserModified_, proxy_.*)]]">
[[i18n('save')]]
</cr-button>
</div>