<!-- Copyright 2015 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

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

<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/web-animations.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-icon-item.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<dom-module id="host-pairing-page">

  <link rel="stylesheet" href="oobe_screen_host_pairing_page.css">

  <template>
    <div id="title">
      <slot name="title"></slot>
    </div>
    <div id="content">
      <slot></slot>
    </div>
  </template>
</dom-module>

<dom-module id="host-pairing-screen">
  <link rel="stylesheet" href="oobe_screen_host_pairing.css">

  <template>
    <neon-animated-pages attr-for-selected="name" selected="[[C.page]]"
        entry-animation="fade-in-animation" exit-animation="fade-out-animation">
      <host-pairing-page name="welcome">
        <div slot="title" i18n-content="loginHostPairingScreenWelcomeTitle">
        </div>
        <div i18n-content="loginHostPairingScreenWelcomeText"></div>
      </host-pairing-page>
      <host-pairing-page name="initialization-error">
        <div slot="title"
            i18n-content="loginHostPairingScreenInitializationErrorTitle">
        </div>
        <div i18n-content="loginHostPairingScreenErrorNeedRestartText"></div>
      </host-pairing-page>
      <host-pairing-page name="code-confirmation">
        <div slot="title"
            i18n-content="loginHostPairingScreenConfirmationTitle">
        </div>
        <div id="code">{{C.code}}</div>
      </host-pairing-page>
      <host-pairing-page name="connection-error">
        <div slot="title"
            i18n-content="loginHostPairingScreenConnectionErrorTitle">
        </div>
        <div i18n-content="loginHostPairingScreenErrorNeedRestartText"></div>
      </host-pairing-page>
      <host-pairing-page name="setup-basic-configuration">
        <div slot="title"
            i18n-content="loginHostPairingScreenSetupBasicConfigTitle">
        </div>
      </host-pairing-page>
      <host-pairing-page name="setup-network-error">
        <div slot="title"
            i18n-content="loginHostPairingScreenSetupNetworkErrorTitle">
        </div>
        <div i18n-content="loginHostPairingScreenErrorNeedRestartText"></div>
      </host-pairing-page>
      <host-pairing-page name="update">
        <div slot="title" i18n-content="loginHostPairingScreenUpdatingTitle">
        </div>
      </host-pairing-page>
      <host-pairing-page name="enrollment-introduction">
        <div slot="title" i18n-content="loginHostPairingScreenEnrollTitle">
        </div>
      </host-pairing-page>
      <host-pairing-page name="enrollment">
        <div slot="title">
          <!-- 'enrollmentTitle' contains <strong> tag. We need to wrap it in
               'html-echo' to prevent HTML escaping. -->
          <html-echo content="[[getEnrollmentStepTitle_(C.enrollmentDomain)]]">
          </html-echo>
        </div>
      </host-pairing-page>
      <host-pairing-page name="enrollment-error">
        <div slot="title"
            i18n-content="loginHostPairingScreenEnrollmentErrorTitle">
        </div>
        <div>[[C.enrollmentError]]</div>
        <div i18n-content="loginHostPairingScreenErrorNeedRestartText"></div>
      </host-pairing-page>
      <host-pairing-page name="pairing-done">
        <div slot="title" i18n-content="loginHostPairingScreenDoneTitle">
        </div>
        <div i18n-content="loginHostPairingScreenDoneText"></div>
      </host-pairing-page>
    </neon-animated-pages>
    <paper-icon-item id="device-indicator">
      <iron-icon icon="cr:bluetooth"></iron-icon>
      <div id="device-label">{{C.deviceName}}</div>
    </paper-icon-item>
    <div id="illustration"></div>
  </template>
</dom-module>