<div id="details-internet-page" class="page" hidden>
  <div class="close-button"></div>
  <!-- Network header -->
  <div id="network-details-header">
    <div id="network-details-title"></div>
    <div id="network-details-subtitle">
      <span id="network-details-subtitle-status"></span>
      <span id="network-details-subtitle-separator"> - </span>
      <span id="network-details-subtitle-type"></span>
    </div>
  </div>
  <div id="internet-details-content-area" class="content-area">
    <!-- Navigation tabs -->
    <div id="details-tab-strip" class="subpages-nav-tabs">
      <span id="wifi-network-nav-tab" class="tab wifi-details"
          tab-contents="wifi-network-tab">
        <span class="tab-label"
            i18n-content="wifiNetworkTabLabel"></span>
        <span class="active-tab-label"
            i18n-content="wifiNetworkTabLabel"></span>
      </span>
      <span id="vpn-nav-tab" class="tab vpn-details"
          tab-contents="vpn-tab">
        <span class="tab-label"
            i18n-content="vpnTabLabel"></span>
        <span class="active-tab-label" i18n-content="vpnTabLabel"></span>
      </span>
      <span id="wimax-network-nav-tab" class="tab wimax-details"
          tab-contents="wimax-network-tab">
        <span class="tab-label"
            i18n-content="wimaxConnTabLabel"></span>
        <span class="active-tab-label"
            i18n-content="wimaxConnTabLabel"></span>
      </span>
      <span id="cellular-conn-nav-tab" class="tab cellular-details"
          tab-contents="cellular-conn-tab">
        <span class="tab-label"
            i18n-content="cellularConnTabLabel"></span>
        <span class="active-tab-label"
            i18n-content="cellularConnTabLabel"></span>
      </span>
      <span id="cellular-device-nav-tab" class="tab cellular-details"
          tab-contents="cellular-device-tab">
        <span class="tab-label"
            i18n-content="cellularDeviceTabLabel"></span>
        <span class="active-tab-label"
            i18n-content="cellularDeviceTabLabel"></span>
      </span>
      <span id="internet-nav-tab" class="tab network-details"
          tab-contents="internet-tab">
        <span class="tab-label" i18n-content="networkTabLabel"></span>
        <span class="active-tab-label" i18n-content="networkTabLabel"></span>
      </span>
      <span id="security-nav-tab" class="tab cellular-details gsm-only"
          tab-contents="security-tab">
        <span class="tab-label" i18n-content="securityTabLabel"></span>
        <span class="active-tab-label" i18n-content="securityTabLabel"></span>
      </span>
      <span id="internet-proxy-nav-tab" class="tab proxy-details"
          tab-contents="network-proxy-tab">
        <span class="tab-label" i18n-content="proxyTabLabel"></span>
        <span class="active-tab-label" i18n-content="proxyTabLabel"></span>
      </span>
    </div>
    <div id="wifi-network-tab" class="subpages-tab-contents wifi-details">
      <section>
        <table class="option-control-table">
          <tr id="prefer-network">
            <td>
              <div class="checkbox">
                <span class="controlled-setting-with-label">
                  <input id="prefer-network-wifi" type="checkbox">
                  <span>
                    <label for="prefer-network-wifi"
                        i18n-content="inetPreferredNetwork">
                    </label>
                    <span class="controlled-setting-indicator" data="preferred"
                        for="prefer-network-wifi">
                    </span>
                  </span>
                </span>
              </div>
            </td>
          </tr>
          <tr class="auto-connect-network">
            <td>
              <div class="checkbox">
                <span class="controlled-setting-with-label">
                  <input id="auto-connect-network-wifi" type="checkbox">
                  <span>
                    <label for="auto-connect-network-wifi"
                        i18n-content="inetAutoConnectNetwork">
                    </label>
                    <span class="controlled-setting-indicator"
                        data="autoConnect" for="auto-connect-network-wifi">
                    </span>
                  </span>
                </span>
              </div>
            </td>
          </tr>
        </table>
      </section>
      <section>
        <table id="wifi-settings-table">
          <tr>
            <td class="option-name" i18n-content="connectionState"></td>
            <td id="wifi-connection-state" class="option-value"></td>
          <tr>
            <td class="option-name" i18n-content="inetSsid"></td>
            <td id="wifi-ssid" class="option-value"></td>
          </tr>
          <tr id="wifi-bssid-entry">
            <td class="option-name" i18n-content="inetBssid"></td>
            <td id="wifi-bssid" class="option-value"></td>
          </tr>
          <tr class="wifi-network-setting">
            <td class="option-name" i18n-content="inetAddress"></td>
            <td id="wifi-ip-address" class="option-value"></td>
          </tr>
          <tr class="wifi-network-setting">
            <td class="option-name" i18n-content="inetNetmask"></td>
            <td id="wifi-netmask" class="option-value"></td>
          </tr>
          <tr class="wifi-network-setting">
            <td class="option-name" i18n-content="inetGateway"></td>
            <td id="wifi-gateway" class="option-value"></td>
          </tr>
          <tr class="wifi-network-setting">
            <td class="option-name" i18n-content="inetNameServers"></td>
            <td id="wifi-name-servers" class="option-value"></td>
          </tr>
          <tr id="wifi-security-entry">
            <td class="options-name" i18n-content="inetEncryption"></td>
            <td id="wifi-security" class="option-value"></td>
          </tr>
          <tr>
            <td class="options-name" i18n-content="inetFrequency"></td>
            <td id="wifi-frequency" class="option-value"></td>
          </tr>
          <tr>
            <td class="options-name" i18n-content="inetSignalStrength"></td>
            <td id="wifi-signal-strength" class="option-value"></td>
          </tr>
          <tr id="wifi-hardware-address-entry">
            <td class="option-name" i18n-content="hardwareAddress"></td>
            <td id="wifi-hardware-address" class="option-value"></td>
          </tr>
        </table>
      </section>
      <section>
        <table class="option-control-table">
          <tr>
            <td id="password-details"  class="option-name"
                i18n-content="inetPassProtected">
            </td>
          </tr>
          <tr>
            <td id="wifi-shared-network" class="option-name"
                i18n-content="inetNetworkShared">
            </td>
          </tr>
        </table>
      </section>
    </div>
    <div id="wimax-network-tab" class="subpages-tab-contents wimax-details">
      <section>
        <table class="option-control-table">
          <tr class="auto-connect-network">
            <td>
              <div class="checkbox">
                <span class="controlled-setting-with-label">
                  <input id="auto-connect-network-wimax" type="checkbox">
                  <span>
                    <label for="auto-connect-network-wimax"
                        i18n-content="inetAutoConnectNetwork">
                    </label>
                    <span class="controlled-setting-indicator"
                        data="autoConnect" for="auto-connect-network-wimax">
                    </span>
                  </span>
                </span>
              </div>
            </td>
          </tr>
        </table>
      </section>
      <section>
        <table id="wimax-settings-table">
          <tr>
            <td class="option-name" i18n-content="connectionState"></td>
            <td id="wimax-connection-state" class="option-value"></td>
          </tr>
          <tr id="wimax-eap-identity-entry">
            <td class="option-name" i18n-content="inetUsername"></td>
            <td id="wimax-eap-identity" class="option-value"></td>
          </tr>
          <tr>
            <td class="options-name" i18n-content="inetSignalStrength"></td>
            <td id="wimax-signal-strength" class="option-value"></td>
          </tr>
        </table>
      </section>
      <section>
        <table class="option-control-table">
          <tr>
            <td id="wimax-shared-network" class="option-name"
                i18n-content="inetNetworkShared">
            </td>
          </tr>
        </table>
      </section>
    </div>
    <div id="vpn-tab" class="subpages-tab-contents vpn-details">
      <section>
        <table class="option-control-table">
          <tr class="auto-connect-network">
            <td>
              <div class="checkbox">
                <span class="controlled-setting-with-label">
                  <input id="auto-connect-network-vpn" type="checkbox">
                  <span>
                    <label for="auto-connect-network-vpn"
                        i18n-content="inetAutoConnectNetwork">
                    </label>
                    <span class="controlled-setting-indicator"
                        data="autoConnect" for="auto-connect-network-vpn">
                    </span>
                  </span>
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="inetServiceName"></td>
            <td id="inet-service-name" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="inetServerHostname"></td>
            <td>
              <input class="option-value" id="inet-server-hostname"></input>
              <span class="controlled-setting-indicator"
                  data="serverHostname" for="inet-server-hostname"></span>
            </td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="inetProviderType"></td>
            <td id="inet-provider-type" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="inetUsername"></td>
            <td id="inet-username" class="option-value"></td>
          </tr>
        </table>
      </section>
    </div>
    <div id="cellular-conn-tab" class="subpages-tab-contents cellular-details">
      <section id="cellular-network-options">
        <table class="option-control-table">
          <tr>
            <td class="option-name" i18n-content="serviceName"></td>
            <td id="service-name" class="option-value">
              <select id="select-carrier">
              </select>
              <div id="switch-carrier-spinner" class="inline-spinner" hidden>
              </div>
            </td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="networkTechnology"></td>
            <td id="network-technology" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="activationState"></td>
            <td id="activation-state" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="roamingState"></td>
            <td id="roaming-state" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="restrictedPool"></td>
            <td id="restricted-pool" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="operatorName"></td>
            <td id="operator-name" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="operatorCode"></td>
            <td id="operator-code" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="errorState"></td>
            <td id="error-state" class="option-value"></td>
          </tr>
          <tr class="gsm-only apn-list-view">
            <td class="option-name" i18n-content="cellularApnLabel"></td>
            <td id="cellular-apn-label" class="option-value">
              <select id="select-apn">
                <option value="-1" i18n-content="cellularApnOther">
                </option>
              </select>
              <span class="controlled-setting-indicator" data="providerApnList"
                  for="select-apn"></span>
            </td>
          </tr>
          <tr class="gsm-only apn-details-view">
            <td class="option-name" i18n-content="cellularApnLabel"></td>
            <td id="cellular-apn-label" class="option-value">
              <input id="cellular-apn" type="text">
            </td>
          </tr>
          <tr class="gsm-only apn-details-view">
            <td class="option-name" i18n-content="cellularApnUsername"></td>
            <td id="cellular-apn-username-label" class="option-value">
              <input id="cellular-apn-username" type="text">
            </td>
          </tr>
          <tr class="gsm-only apn-details-view">
            <td class="option-name" i18n-content="cellularApnPassword"></td>
            <td id="cellular-apn-password-label" class="option-value">
              <input id="cellular-apn-password" type="password">
            </td>
          </tr>
          <tr class="gsm-only apn-details-view">
            <td class="option-name"></td>
            <td class="option-value">
              <button id="cellular-apn-use-default"
                  i18n-content="cellularApnUseDefault"></button>
              <button id="cellular-apn-set"
                  i18n-content="cellularApnSet"></button>
              <button id="cellular-apn-cancel"
                  i18n-content="cellularApnCancel"></button>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="checkbox">
                <span class="controlled-setting-with-label">
                  <input id="auto-connect-network-cellular" type="checkbox">
                  <span>
                    <label for="auto-connect-network-cellular"
                        i18n-content="inetAutoConnectNetwork">
                    </label>
                    <span class="controlled-setting-indicator"
                        data="autoConnect" for="auto-connect-network-cellular">
                    </span>
                  </span>
                </span>
              </div>
            </td>
          </tr>
        </table>
      </section>
    </div>
    <div id="cellular-device-tab" class="subpages-tab-contents
        cellular-details">
      <section id="cellular-device-options">
        <table class="option-control-table">
          <tr>
            <td class="option-name" i18n-content="manufacturer"></td>
            <td id="manufacturer" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="modelId"></td>
            <td id="model-id" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="firmwareRevision"></td>
            <td id="firmware-revision" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name" i18n-content="hardwareRevision"></td>
            <td id="hardware-revision" class="option-value"></td>
          </tr>
          <tr class="cdma-only">
            <td class="option-name" i18n-content="prlVersion"></td>
            <td id="prl-version" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name">MEID:</td>
            <td id="meid" class="option-value"></td>
          </tr>
          <tr class="gsm-only">
            <td class="option-name">ICCID:</td>
            <td id="iccid" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name">ESN:</td>
            <td id="esn" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name">IMEI:</td>
            <td id="imei" class="option-value"></td>
          </tr>
          <tr class="gsm-only">
            <td class="option-name">IMSI:</td>
            <td id="imsi" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name">MDN:</td>
            <td id="mdn" class="option-value"></td>
          </tr>
          <tr>
            <td class="option-name">MIN/MSID:</td>
            <td id="min" class="option-value"></td>
          </tr>
        </table>
      </section>
    </div>
    <div id="internet-tab" class="subpages-tab-contents">
      <section id="advanced-section">
        <table class="option-control-table">
          <tr>
            <td class="option-name" i18n-content="connectionState"></td>
            <td id="connection-state" class="option-value"></td>
          </tr>
          <tr id="hardware-address-row">
            <td class="option-name" i18n-content="hardwareAddress"></td>
             <td id="hardware-address" class="option-value"></td>
          </tr>
        </table>
      </section>
      <section id="ipconfig-section">
        <div id="ip-automatic-configuration" class="checkbox">
          <span class="controlled-setting-with-label">
            <input id="ip-automatic-configuration-checkbox"
                type="checkbox">
            <span>
              <label for="ip-automatic-configuration-checkbox"
                  i18n-content="ipAutomaticConfiguration">
              </label>
              <span class="controlled-setting-indicator" data="ipconfigDHCP"
                  for="ip-automatic-configuration">
              </span>
            </span>
          </span>
        </div>
        <div>
        <table id="ip-address-settings">
          <tr>
            <td class="spacer" width="14px"></td>
            <td class="option-name" i18n-content="inetAddress"></td>
            <td><div id="ip-address"></div></td>
          </tr>
          <tr>
            <td class="spacer" width="14px"></td>
            <td class="option-name" id="ip-netmask-label"
                i18n-content="inetNetmask"></td>
            <td><div id="ip-netmask"></div></td>
          </tr>
          <tr>
            <td class="spacer" width="14px"></td>
            <td class="option-name" i18n-content="inetGateway"></td>
            <td><div id="ip-gateway"></div></td>
          </tr>
        </table>
      </section>
      <section id="ipconfig-dns-section">
        <div class="radio">
          <label>
            <input id="automatic-dns-radio" type="radio" name="dnstype"
                value="automatic">
            <span i18n-content="automaticNameServers"></span>
          </label>
        </div>
        <div id="automatic-dns-display" class="dns-display"></div>
        <div class="radio">
          <label>
            <input id="google-dns-radio" type="radio" name="dnstype"
                value="google">
            <span id="google-dns-label"></span>
          </label>
        </div>
        <div id="google-dns-display" class="dns-display"></div>
        <div class="radio">
          <label>
            <input id="user-dns-radio" type="radio" name="dnstype"
                value="user">
            <span i18n-content="userNameServers"></span>
          </label>
        </div>
        <table id="user-dns-settings">
          <tr>
            <td class="spacer" width="14px"></td>
            <td>
              <div id="ipconfig-dns1" i18n-placeholder-text="userNameServer1"
                  allow-empty>
              </div>
            </td>
            <td>
              <div id="ipconfig-dns2" i18n-placeholder-text="userNameServer2"
                  allow-empty>
              </div>
            </td>
          </tr>
          <tr>
            <td class="spacer" width="14px"></td>
            <td>
              <div id="ipconfig-dns3" i18n-placeholder-text="userNameServer3"
                  allow-empty>
              </div>
            </td>
            <td>
              <div id="ipconfig-dns4" i18n-placeholder-text="userNameServer4"
                  allow-empty>
              </div>
            </td>
          </tr>
        </table>
      </section>
    </div>
    <div id="security-tab"
         class="subpages-tab-contents cellular-details gsm-only">
      <div id="cellular-security-options">
        <section>
          <div id="sim-pin-lock" class="checkbox">
            <span class="controlled-setting-with-label">
              <input id="sim-card-lock-enabled" type="checkbox">
              <span>
                <label for="sim-card-lock-enabled" i18n-content="lockSimCard">
                </label>
                <span class="controlled-setting-indicator"
                    data="simCardLockEnabled" for="sim-card-lock-enabled">
                </span>
              </span>
            </span>
          </div>
        </section>
        <section>
          <div id="change-pin-area">
            <button id="change-pin" i18n-content="changePinButton"></button>
            <span class="controlled-setting-indicator" data="simCardLockEnabled"
                for="change-pin"></span>
          </div>
        </section>
      </div>
    </div>
    <div id="network-proxy-tab" class="subpages-tab-contents">
      <section>
        <div id="network-proxy-info-banner" hidden>
          <span id="banner-text" class="page-banner-text"></span>
        </div>
        <div class="radio">
          <label>
            <input id="direct-proxy" type="radio" name="proxytype" value="1"
                pref="cros.session.proxy.type">
            <span i18n-content="proxyDirectInternetConnection"></span>
          </label>
        </div>
        <div class="radio">
          <label>
            <input id="auto-proxy" type="radio" name="proxytype" value="3"
                pref="cros.session.proxy.type">
            <span i18n-content="proxyAutomatic"></span>
          </label>
        </div>
        <div class="proxy-subsection" id="auto-proxy-parms">
          <div class="checkbox">
            <label>
              <input id="proxy-use-pac-url" type="checkbox"
                  pref="cros.session.proxy.usepacurl">
              <span i18n-content="proxyUseConfigUrl"></span>
            </label>
          </div>
          <div>
            <label>
              <input id="proxy-pac-url" type="url" size="50"
                  pref="cros.session.proxy.pacurl">
            </label>
          </div>
        </div>
        <div class="radio">
          <label>
            <input id="manual-proxy" type="radio" name="proxytype" value="2"
                pref="cros.session.proxy.type">
            <span i18n-content="proxyManual"></span>
          </label>
        </div>
        <div class="proxy-subsection" id="manual-proxy-parms">
          <div class="checkbox">
            <label>
              <input id="proxy-all-protocols" type="checkbox"
                  pref="cros.session.proxy.single">
              <span i18n-content="sameProxyProtocols"></span>
            </label>
          </div>
          <div id="single-proxy">
            <table>
              <tr>
                <td>
                  <span i18n-content="httpProxy"></span>
                  <input id="proxy-host-single-name" type="text" size="25"
                      pref="cros.session.proxy.singlehttp" disabled>
                </td>
                <td>
                  <span i18n-content="proxyPort"></span>
                  <input id="proxy-host-single-port" size="4"
                      pref="cros.session.proxy.singlehttpport" disabled>
                </td>
              </tr>
            </table>
          </div>
          <div id="multi-proxy">
            <table>
              <tr>
                <td>
                  <span i18n-content="httpProxy"></span>
                </td>
                <td>
                  <input id="proxy-host-name" type="text" size="25"
                      pref="cros.session.proxy.httpurl" disabled>
                </td>
                <td>
                  <span i18n-content="proxyPort"></span>
                </td>
                <td>
                  <input id="proxy-host-port" size="4"
                      pref="cros.session.proxy.httpport" disabled>
                </td>
              </tr>
              <tr>
                <td>
                  <span i18n-content="secureHttpProxy"></span>
                </td>
                <td>
                  <input id="secure-proxy-host-name" type="text" size="25"
                      pref="cros.session.proxy.httpsurl" disabled>
                </td>
                <td>
                  <span i18n-content="proxyPort"></span>
                </td>
                <td>
                  <input id="secure-proxy-port" size="4"
                      pref="cros.session.proxy.httpsport" disabled>
                </td>
              </tr>
              <tr>
                <td>
                  <span i18n-content="ftpProxy"></span>
                </td>
                <td>
                  <input id="ftp-proxy" type="text" size="25"
                      pref="cros.session.proxy.ftpurl" disabled>
                </td>
                <td>
                  <span i18n-content="proxyPort"></span>
                  </td>
                <td>
                  <input id="ftp-proxy-port" size="4"
                      pref="cros.session.proxy.ftpport" disabled>
                </td>
              </tr>
              <tr>
                <td>
                  <span i18n-content="socksHost"></span>
                </td>
                <td>
                  <input id="socks-host" type="text" size="25"
                      pref="cros.session.proxy.socks" disabled>
                </td>
                <td>
                  <span i18n-content="proxyPort"></span>
                </td>
                <td>
                  <input id="socks-port" size="4"
                      pref="cros.session.proxy.socksport" disabled>
                </td>
              </tr>
            </table>
          </div>
          <div id="advanced-config">
            <div class="option vbox flex">
              <div i18n-content="proxyBypass"></div>
              <list id="ignored-host-list"></list>
              <input id="new-host" type="url" size="30">
              <button id="add-host" i18n-content="addHost"></button>
              <button id="remove-host" i18n-content="removeHost"></button>
            </div>
          </div>
        </div>
        <div class="proxy-subsection" id="web-proxy-auto-discovery">
          <span i18n-content="webProxyAutoDiscoveryUrl"></span>
          <input id="web-proxy-auto-discovery-url" type="url" disabled>
        </div>
      </section>
    </div>
  </div>
  <div class="action-area">
    <div class="button-strip">
      <!-- TODO(dbeam): Clarify style guide regarding tag wrap. -->
      <button id="details-internet-dismiss" class="default-button"
          i18n-content="detailsInternetDismiss">
      </button>
      <button id="details-internet-login" i18n-content="connectButton">
      </button>
      <button id="details-internet-disconnect" i18n-content="disconnectButton">
      </button>
      <button id="details-internet-configure" i18n-content="configureButton">
      </button>
      <button id="activate-details" i18n-content="activateButton"></button>
      <button id="buyplan-details" i18n-content="buyplanButton"></button>
      <button id="view-account-details" i18n-content="viewAccountButton">
      </button>
    </div>
  </div>
</div>