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

<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_apnlist.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_ip_config.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_nameservers.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_property_list.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_proxy.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_shared_css.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.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="stylesheet" href="chrome://resources/css/text_defaults_md.css">

<dom-module id="internet-detail-dialog">
  <template>
    <style include="network-shared iron-flex">
      .section {
        @apply(--cr-section);
        margin-bottom: 10px;
      }

      .section.first {
        border-top: none;
      }

      .section.single-column {
        align-items: stretch;
        flex-direction: column;
        justify-content: center;
      }

      .section > .start {
        align-items: center;
        flex: auto;
      }

      .title {
        -webkit-margin-start: 20px;
        font-size: 107.69%;  /* 14px / 13px */
        font-weight: 500;
      }

      #networkState[connected] {
        color: var(--google-green-500);
      }
    </style>

    <!-- Title section: Icon + name + connection state. -->
    <div class="section first">
      <div class="start layout horizontal center">
        <cr-network-icon network-state="[[networkProperties]]">
        </cr-network-icon>
        <div id="networkName" class="title">
          [[getNameText_(networkProperties)]]
        </div>
        <div id="networkState" class="title"
            connected$="[[isConnectedState_(networkProperties)]]">
          [[getStateText_(networkProperties)]]
        </div>
      </div>
      <paper-button class="primary-button" on-tap="onConnectTap_"
          hidden$="[[!showConnect_(networkProperties)]]"
          disabled="[[!enableConnect_(networkProperties)]]">
        $i18n{networkButtonConnect}
      </paper-button>
      <paper-button class="primary-button" on-tap="onDisconnectTap_"
          hidden$="[[!showDisconnect_(networkProperties)]]">
        $i18n{networkButtonDisconnect}
      </paper-button>
    </div>

    <!-- Proxy -->
    <div class="section single-column">
      <network-proxy editable use-shared-proxies
          on-proxy-change="onProxyChange_"
          network-properties="[[networkProperties]]">
      </network-proxy>
    </div>

    <template is="dom-if"
        if="[[isRememberedOrConnected_(networkProperties)]]">
      <!-- IP Config -->
      <div class="section single-column">
        <network-ip-config editable on-ip-change="onIPConfigChange_"
            network-properties="[[networkProperties]]">
        </network-ip-config>
      </div>

      <!-- IP Config, Nameservers -->
      <div class="section single-column">
        <network-nameservers editable
            on-nameservers-change="onIPConfigChange_"
            network-properties="[[networkProperties]]">
        </network-nameservers>
      </div>
    </template>

    <!-- APN -->
    <template is="dom-if" if="[[isCellular_(networkProperties)]]">
      <div class="section single-column">
        <network-apnlist editable on-apn-change="onNetworkPropertyChange_"
            network-properties="[[networkProperties]]">
        </network-apnlist>
      </div>
    </template>

    <!-- Other properties to show if present. -->
    <template is="dom-if" if="[[hasInfoFields_(networkProperties)]]">
      <div class="section single-column indented">
        <network-property-list
            fields="[[getInfoFields_(networkProperties)]]"
            property-dict="[[networkProperties]]"
            on-property-change="onNetworkPropertyChange_">
        </network-property-list>
      </div>
    </template>

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