<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="network_proxy_exclusions.html">
<link rel="import" href="network_proxy_input.html">
<link rel="import" href="network_shared_css.html">

<dom-module id="network-proxy">
  <template>
    <style include="network-shared cr-hidden-style iron-flex iron-flex-alignment md-select paper-button-style">
      network-proxy-input {
        margin-bottom: 10px;
      }

      network-proxy-exclusions {
        margin: 10px 0;
      }

      #addException {
        margin-top: 10px;
      }

      #manualProxy {
        padding-inline-start: var(--cr-section-padding);
      }
    </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]]"
          disabled="[[!isEditable_('Type', networkProperties, 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, ProxySettingsType_.PAC)]]">
      <cr-input id="pacInput" class="flex"
          label="[[i18n('networkProxyAutoConfig')]]"
          value="{{proxy_.PAC}}" on-change="onPACChange_"
          disabled="[[!isEditable_('PAC', networkProperties, editable,
              useSharedProxies)]]">
      </cr-input>
    </div>

    <!-- Web Proxy Auto Discovery (WPAD) -->
    <div class="property-box indented"
        hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.WPAD)]]">
      <div>[[i18n('networkProxyWpad')]]</div>
      <div class="middle">[[WPAD_]]</div>
    </div>

    <!-- Manual -->
    <div class="property-box indented"
        hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
      <div id="networkProxyToggleLabel" class="flex">
        [[i18n('networkProxyUseSame')]]
      </div>
      <cr-toggle checked="{{useSameProxy_}}"
          disabled="[[!isEditable_('Type', networkProperties, editable,
              useSharedProxies)]]"
          aria-labelledby="networkProxyToggleLabel">
      </cr-toggle>
    </div>

    <div id="manualProxy" class="layout vertical start"
        hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
      <div hidden$="[[!useSameProxy_]]" class="layout vertical">
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_('Manual.HTTPProxy.Host', networkProperties,
                editable, useSharedProxies)]]"
            value="{{proxy_.Manual.HTTPProxy}}"
            label="[[i18n('networkProxy')]]">
        </network-proxy-input>
      </div>
      <div hidden$="[[useSameProxy_]]" class="layout vertical">
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_('Manual.HTTPProxy.Host', networkProperties,
                editable, useSharedProxies)]]"
            value="{{proxy_.Manual.HTTPProxy}}"
            label="[[i18n('networkProxyHttp')]]">
        </network-proxy-input>
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_('Manual.SecureHTTPProxy.Host',
                networkProperties, editable, useSharedProxies)]]"
            value="{{proxy_.Manual.SecureHTTPProxy}}"
            label="[[i18n('networkProxyShttp')]]">
        </network-proxy-input>
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_('Manual.FTPProxy.Host', networkProperties,
                editable, useSharedProxies)]]"
            value="{{proxy_.Manual.FTPProxy}}"
            label="[[i18n('networkProxyFtp')]]">
        </network-proxy-input>
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_('Manual.SOCKS.Host', networkProperties,
                editable, useSharedProxies)]]"
            value="{{proxy_.Manual.SOCKS}}"
            label="[[i18n('networkProxySocks')]]">
        </network-proxy-input>
      </div>

      <div hidden="[[!isEditable_('Type', networkProperties, editable,
          useSharedProxies)]]">
        <div>[[i18n('networkProxyExceptionList')]]</div>
        <network-proxy-exclusions on-proxy-change="onProxyExclusionsChange_"
            exclusions="{{proxy_.ExcludeDomains}}"
            editable="[[isEditable_('ExcludeDomains', networkProperties,
                editable, useSharedProxies)]]">
        </network-proxy-exclusions>
        <div id="addException" class="layout horizontal center">
          <cr-input id="proxyExclusion" class="flex"
              on-keypress="onAddProxyExclusionKeypress_">
            <paper-button on-tap="onAddProxyExclusionTap_" slot="suffix">
              [[i18n('networkProxyAddException')]]
            </paper-button>
          </cr-input>
        </div>
      </div>

      <paper-button id="saveManualProxy"
          on-tap="onSaveProxyTap_" class="action-button"
          disabled="[[!isSaveManualProxyEnabled_(networkProperties,
              proxyIsUserModified_, proxy_.*)]]">
        [[i18n('save')]]
      </paper-button>
    </div>

  </template>
  <script src="network_proxy.js"></script>
</dom-module>
