<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.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/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="/controls/settings_checkbox.html">
<link rel="import" href="/i18n_setup.html">
<link rel="import" href="/prefs/prefs_behavior.html">
<link rel="import" href="/settings_vars_css.html">
<link rel="import" href="internet_shared_css.html">
<link rel="import" href="network_proxy_exclusions.html">
<link rel="import" href="network_proxy_input.html">

<dom-module id="network-proxy">
  <template>
    <style include="internet-shared md-select">
      cr-policy-network-indicator,
      cr-policy-pref-indicator {
        -webkit-margin-end: 10px;
      }

      network-proxy-input {
        margin-bottom: 10px;
      }

      /* Use .middle spacing but no flex. */
      .settings-box .middle {
        flex: none;
      }

      .settings-box.indent {
        @apply(--settings-list-frame-padding);
      }

      #exceptionsDiv {
        padding: 10px 0;
      }

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

      #proxyDiv paper-checkbox {
        padding: 10px 0;
      }
    </style>

    <!-- Policy indicator -->
    <div class="settings-box first single-column"
        hidden$="[[!isControlled(networkProperties.ProxySettings.Type)]]">
      <div class="layout horizontal center"
          hidden$="[[!getShowNetworkPolicyIndicator_(networkProperties)]]">
        <cr-policy-network-indicator
            property="[[networkProperties.ProxySettings.Type]]">
        </cr-policy-network-indicator>
        <div>$i18n{networkProxyEnforcedPolicy}</div>
      </div>
      <div class="layout horizontal center"
          hidden$="[[!getShowPrefPolicyIndicator_(networkProperties)]]">
        <cr-policy-pref-indicator pref="[[prefs.proxy]]">
        </cr-policy-pref-indicator>
        <div>$i18n{networkProxyControlledExtension}</div>
      </div>
    </div>

    <!-- Allow shared proxies -->
    <div class="settings-box continuation"
        hidden$="[[!getShowAllowShared_(
                 networkProperties.ProxySettings.Type)]]">
      <settings-checkbox id="allowShared"
          pref="{{prefs.settings.use_shared_proxies}}"
          no-set-pref label="$i18n{networkProxyAllowShared}"
          on-change="onAllowSharedProxiesChange_">
      </settings-checkbox>
    </div>

    <!-- Proxy type dropdown -->
    <div class="settings-box continuation">
      <div class="start">$i18n{networkProxyConnectionType}</div>
      <div class="md-select-wrapper">
        <select id="proxyType" class="md-select" on-change="onTypeChange_"
            value="[[proxy.Type]]"
            disabled="[[!isProxyEditable_(networkProperties, editable,
                      useSharedProxies_)]]">
          <template is="dom-repeat" items="[[proxyTypes_]]">
            <option value="[[item]]">[[getProxyTypeDesc_(item)]]</option>
          </template>
        </select>
        <span class="md-select-underline"></span>
      </div>
    </div>

    <!-- Autoconfiguration (PAC) -->
    <div class="settings-box continuation indent"
        hidden$="[[!matches_(proxy.Type, ProxySettingsType_.PAC)]]">
      <div>$i18n{networkProxyAutoConfig}</div>
      <paper-input no-label-float class="middle" value="{{proxy.PAC}}"
          disabled="[[!isEditable_(networkProperties.ProxySettings.PAC,
                    useSharedProxies_)]]"
          on-blur="onProxyInputChange_">
      </paper-input>
    </div>

    <!-- Web Proxy Auto Discovery (WPAD) -->
    <div class="settings-box continuation indent"
        hidden$="[[!matches_(proxy.Type, ProxySettingsType_.WPAD)]]">
      <div>$i18n{networkSectionWpad}</div>
      <div class="middle">[[WPAD]]</div>
    </div>

    <!-- Manual -->
    <div id="proxyDiv" class="settings-box continuation single-column indent"
        hidden$="[[!matches_(proxy.Type, ProxySettingsType_.MANUAL)]]">
      <paper-checkbox checked="{{useSameProxy_}}"
          disabled="[[!isProxyEditable_(networkProperties, editable,
                    useSharedProxies_)]]">
        $i18n{networkProxyUseSame}
      </paper-checkbox>
      <div hidden$="[[!useSameProxy_]]" class="layout vertical">
        <network-proxy-input 
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_(
                      networkProperties.ProxySettings.Manual.HTTPProxy.Host,
                      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_(
                      networkProperties.ProxySettings.Manual.HTTPProxy.Host,
                      editable, useSharedProxies_)]]"
            value="{{proxy.Manual.HTTPProxy}}"
            label="$i18n{networkProxyHttp}">
        </network-proxy-input>
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_(
                      networkProperties.ProxySettings.Manual.SecureHTTPProxy.Host,
                      editable, useSharedProxies_)]]"
            value="{{proxy.Manual.SecureHTTPProxy}}"
            label="$i18n{networkProxyShttp}">
        </network-proxy-input>
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_(
                      networkProperties.ProxySettings.Manual.FTPProxy.Host,
                      editable, useSharedProxies_)]]"
            value="{{proxy.Manual.FTPProxy}}"
            label="$i18n{networkProxyFtp}">
        </network-proxy-input>
        <network-proxy-input
            on-proxy-change="onProxyInputChange_"
            editable="[[isEditable_(
                      networkProperties.ProxySettings.Manual.SOCKS.Host,
                      editable, useSharedProxies_)]]"
            value="{{proxy.Manual.SOCKS}}"
            label="$i18n{networkProxySocks}">
        </network-proxy-input>
      </div>

      <div id="exceptionsDiv"
          hidden="[[!isProxyEditable_(networkProperties, editable,
                  useSharedProxies_)]]">
        <div>$i18n{networkProxyExceptionList}</div>
        <network-proxy-exclusions on-proxy-change="onProxyExclusionsChange_"
            exclusions="{{proxy.ExcludeDomains}}">
        </network-proxy-exclusions>
        <div class="layout horizontal">
          <paper-input-container no-label-float class="flex">
            <input id="proxyExclusion" is="iron-input">
          </paper-input-container>
          <paper-button on-tap="onAddProxyExclusionTap_">
            $i18n{networkProxyAddException}
          </paper-button>
        </div>
      </div>
    </div>

    <!-- Confirm Allow shared proxies dialog -->
    <dialog is="cr-dialog" id="confirmAllowSharedDialog"
        on-cancel="onAllowSharedDialogCancel_">
      <div class="title">$i18n{networkProxyAllowSharedWarningTitle}</div>
      <div class="body">$i18n{networkProxyAllowSharedWarningMessage}</div>
      <div class="button-container">
        <paper-button class="cancel-button"
            on-tap="onAllowSharedDialogCancel_">
          $i18n{cancel}
        </paper-button>
        <paper-button class="action-button"
            on-tap="onAllowSharedDialogConfirm_">
          $i18n{confirm}
        </paper-button>
      </div>
    </dialog>
  </template>
  <script src="network_proxy.js"></script>
</dom-module>
