-<!-- TODO(dzhioev): replace all the strings with i18n-values. -->
-<div class="step hidden no-logo" id="host-pairing" hidden>
- <div alias="pageNameLabel_" class="page-name"></div>
- <div>My name is <strong alias="deviceNameLabel_"></strong>.</div>
- <div class="page page-welcome">
- <div>Welcome!</div>
- </div>
- <div class="page page-code-confirmation">
- <div>Pair with a controller</div>
- <div alias="confirmationCodeLabel_"></div>
- </div>
- <div class="page page-update">
- <div>Updating Chromebox...</div>
- <progress alias="updateProgressBar_"></progress>
- </div>
- <div class="page page-enrollment-introduction">
- <div>Enroll your organization</div>
- </div>
- <div class="page page-enrollment">
- <div>
- Enrolling in <strong alias="domainNameLabel_">domain.com</strong>...
+<link rel="import" href="chrome://oobe/custom_elements.html">
+<link rel="import" href="polymer/core-animated-pages/core-animated-pages.html">
+<link rel="import" href="polymer/core-iconset-svg/core-iconset-svg.html">
+<link rel="import" href="polymer/core-item/core-item.html">
+<link rel="import" href="polymer/polymer/polymer.html">
+
+<core-iconset-svg id="host-pairing-icons" iconSize="48">
+ <svg>
+ <defs>
+ <g id="cast">
+ <include src="../../../../app/theme/cast_icon.svg">
+ </g>
+ </defs>
+ </svg>
+</core-iconset-svg>
+
+<polymer-element name="host-pairing-page" noscript>
+ <template>
+ <link rel="stylesheet" href="oobe_screen_host_pairing_page.css">
+
+ <div id="title">
+ <content select=".title"></content>
</div>
- </div>
- <div class="page page-enrollment-error">
- <div>Enrollment failed =(</div>
- </div>
- <div class="page page-pairing-done">
- <div>Great success!</div>
- </div>
+ <div id="content">
+ <content></content>
+ </div>
+ </template>
+</polymer-element>
+
+<polymer-element name="host-pairing-screen" extends="oobe-screen">
+ <template>
+ <link rel="stylesheet" href="oobe_screen_host_pairing.css">
+
+ <core-animated-pages transitions="cross-fade-all"
+ selected="{{C.page}}">
+ <host-pairing-page name="welcome">
+ <div class="title">{{'welcomeTitle' | i18n}}</div>
+ <div>{{'welcomeText' | i18n}}</div>
+ </host-pairing-page>
+ <host-pairing-page name="code-confirmation">
+ <div class="title">{{'confirmationTitle' | i18n}}</div>
+ <div id="code">{{C.code}}</div>
+ </host-pairing-page>
+ <host-pairing-page name="update">
+ <div class="title">{{'updatingTitle' | i18n}}</div>
+ <!-- Not yet implemented on backend side. -->
+ <!--div>{{['updatingText', C.downloadedMb, C.totalMb] | i18n}}</div-->
+ </host-pairing-page>
+ <host-pairing-page name="enrollment-introduction">
+ <div class="title">{{'enrollTitle' | i18n}}</div>
+ </host-pairing-page>
+ <host-pairing-page name="enrollment">
+ <div class="title">
+ <!-- 'enrollmentTitle' contains <strong> tag. We need to wrap it in
+ 'html-echo' to prevent HTML escaping. -->
+ <html-echo
+ content="{{['enrollingTitle', C.enrollmentDomain] | i18n}}">
+ </html-echo>
+ </div>
+ </host-pairing-page>
+ <host-pairing-page name="enrollment-error">
+ <div class="title">{{'enrollmentErrorTitle' | i18n}}</div>
+ <div>{{'errorNeedsRestart' | i18n}}</div>
+ </host-pairing-page>
+ <host-pairing-page name="pairing-done">
+ <div class="title">{{'doneTitle' | i18n}}</div>
+ <div>{{'doneText' | i18n}}</div>
+ </host-pairing-page>
+ </core-animated-pages>
+ <core-item id="device-indicator"class="font-scalable"
+ icon="host-pairing-icons:cast">
+ <div id="device-label">{{C.deviceName}}</div>
+ </core-item>
+ <div id="illustration"></div>
+ </template>
+</polymer-element>
+
+<div class="step hidden no-logo fullscreen" id="host-pairing" hidden>
+ <host-pairing-screen name="HostPairingScreen"></host-pairing-screen>
</div>
+