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

<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/button_bar.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/fake_mojo_service.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/mojo_api.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup_delegate.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/password_page.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/setup_succeeded_page.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/start_setup_page.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">

<dom-module id="multidevice-setup">
  <template>
    <style include="multidevice-setup-shared">
      :host {
        @apply --layout-vertical;
        box-sizing: border-box;
        color: var(--google-grey-700);
        font-size: 13px;
        height: 640px;
        line-height: 16px;
        margin: auto;
        padding: 60px 32px 32px 32px;
        width: 768px;
      }

      iron-pages {
        padding: 0 32px;
      }
    </style>
    <iron-pages attr-for-selected="is"
        selected="[[visiblePageName]]"
        selected-item="{{visiblePage_}}">
      <template is="dom-if" if="[[shouldPasswordPageBeIncluded_(delegate)]]"
          restamp>
        <password-page auth-token="{{authToken_}}"
            forward-button-disabled="{{passwordPageForwardButtonDisabled_}}"
            password-field-valid="{{passwordFieldValid}}"
            on-user-submitted-password="onUserSubmittedPassword_">
        </password-page>
      </template>
      <template is="dom-if"
          if="[[shouldSetupSucceededPageBeIncluded_(delegate)]]" restamp>
        <setup-succeeded-page></setup-succeeded-page>
      </template>
      <start-setup-page devices="[[devices_]]"
          selected-device-id="{{selectedDeviceId_}}"
          delegate="[[delegate]]">
      </start-setup-page>
    </iron-pages>
    <div class="flex"></div>
    <button-bar forward-button-hidden="[[!forwardButtonText]]"
        backward-button-hidden="[[!backwardButtonText]]"
        cancel-button-hidden="[[!cancelButtonText]]">
      <slot name="backward-button" slot="backward-button"></slot>
      <slot name="cancel-button" slot="cancel-button"></slot>
      <slot name="forward-button" slot="forward-button"></slot>
    </button-bar>
  </template>
  <script src="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup.js">
  </script>
</dom-module>
