<!-- 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/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.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-button/paper-button.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-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">

<!--
List of devices.
Published properties:
  * devices - array of strings, the model of the list.
  * selected - a name of the selected device ('null' if no devices are
    selected).
  * connecting - a binary attribute. If set, the list does not respond to the
    user actions and a spinner is shown near selected device.
-->
<dom-module id="pairing-device-list">
  <link rel="stylesheet" href="oobe_flex_layout.css">
  <link rel="stylesheet" href="pairing_device_list.css">

  <iron-iconset-svg name="pairing-device-list-icons">
    <svg><defs><g id="circle">
      <circle cx="12" cy="12" r="12"></circle>
    </g></defs></svg>
  </iron-iconset-svg>

  <template>
    <iron-selector selected="{{selected}}" attr-for-selected="name">
      <template is="dom-repeat" items="[[devices]]">
        <paper-icon-item name$="[[item]]" class="relative">
          <iron-icon icon="pairing-device-list-icons:circle" item-icon
              style$="[[getStyleForDeviceIcon_(item)]]">
          </iron-icon>
          <div><span>[[item]]</span></div>
          <div class="flex horizontal end-justified layout center">
            <div class="throbber"></div>
          </div>
        </paper-icon-item>
      </template>
    </iron-selector>
  </template>
</dom-module>

<!--
Single page of the controller's out-of-box flow.
The page consists of the top part and the bottom part.
The top part contains a title of the page. Direct successors of the
<controller-pairing-page> having 'title' class will be inserted there.
The bottom part contains controls that are aligned right  (all the successors
that are <paper-button>s) and a content of the page (all the other successors).
Special case is a help button (<paper-button> with 'help' class set) which
is aligned left.
There are several classes that can be used to change the page appearance:
  * split - if this class is set, top and bottom parts will have different
    colors (see stylesheet of controller-pairing-screen).
  * big-font - if this class is set, slightly bigger font is used on page.
  * progress - if this class is set and 'split' is not, progress bar is shown
    instead of top and bottom parts separator.

Also height of the top part can be specified in CSS as follows:

controller-pairing-page::shadow #top {
  height: 100px;
}
-->
<dom-module id="controller-pairing-page">
  <link rel="stylesheet" href="controller_pairing_page.css">

  <template>
    <div class="vertical layout fit">
      <div id="top" class="relative vertical end-justified layout">
        <div id="title">
          <slot name="title"></slot>
        </div>
        <div id="separator">
          <paper-progress indeterminate></paper-progress>
        </div>
      </div>
      <div id="bottom" class="flex vertical layout">
        <div class="flex vertical layout">
          <slot></slot>
        </div>
        <div id="controls" class="horizontal layout center">
          <div class="flex">
            <slot name="help"></slot>
          </div>
          <slot name="buttons"></slot>
        </div>
      </div>
    </div>
  </template>
</dom-module>

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

  <template>
    <style>
      div.elevate {
        @apply(--shadow-elevation-2dp);
      }
    </style>
    <div class="fit elevate">
      <neon-animated-pages id="pages" selected="{{C.page}}"
          attr-for-selected="name" class="fit">
        <controller-pairing-page name="devices-discovery" class="big-font">
          <div slot="title"
              i18n-content="loginControllerPairingScreenWelcomeTitle">
          </div>
          <div i18n-content="loginControllerPairingScreenSearching"></div>
          <paper-button slot="help" on-tap="helpButtonClicked_"
              i18n-content="loginControllerPairingScreenHelpBtn">
          </paper-button>
        </controller-pairing-page>

        <controller-pairing-page name="device-select" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenSelectTitle">
          </div>
          <pairing-device-list devices="[[C.devices]]"
              selected="{{selectedDevice}}">
          </pairing-device-list>
          <paper-button slot="help" on-tap="helpButtonClicked_"
              i18n-content="loginControllerPairingScreenHelpBtn">
          </paper-button>
          <paper-button slot="buttons" on-tap="userActed" action="chooseDevice"
              disabled$="[[C.controlsDisabled]]"
              i18n-content="loginControllerPairingScreenConnectBtn">
          </paper-button>
        </controller-pairing-page>

        <controller-pairing-page name="device-not-found">
          <div slot="title"
              i18n-content="loginControllerPairingScreenTroubleConnectingTitle">
          </div>
          <div i18n-content="loginControllerPairingScreenConnectingAdvice">
          </div>
          <paper-button slot="buttons" on-tap="userActed"
              action="repeatDiscovery"
              i18n-content="loginControllerPairingScreenAdviceGotItBtn">
          </paper-button>
        </controller-pairing-page>

        <controller-pairing-page name="establishing-connection" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenSelectTitle">
          </div>
          <pairing-device-list devices="[[C.devices]]"
              selected="{{selectedDevice}}" connecting>
          </pairing-device-list>
          <paper-button slot="help" on-tap="helpButtonClicked_"
              i18n-content="loginControllerPairingScreenHelpBtn">
          </paper-button>
          <paper-button slot="buttons" disabled
              i18n-content="loginControllerPairingScreenConnecting">
          </paper-button>
        </controller-pairing-page>

        <controller-pairing-page name="establishing-connection-error">
          <!-- TODO(dzhioev): Strings TBD. http://crbug.com/423740 -->
          <div slot="title">
            Unable to connect to <span>[[selectedDevice]]<span>
          </div>
          <paper-button slot="buttons" on-tap="userActed"
              action="repeatDiscovery">
            Repeat discovery
          </paper-button>
        </controller-pairing-page>

        <controller-pairing-page name="code-confirmation" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenConfirmationTitle">
          </div>
          <div
              i18n-content="loginControllerPairingScreenConfirmationQuestion">
          </div>
          <div id="code"><span>[[C.code]]</span></div>
          <paper-button slot="buttons" on-tap="userActed" action="rejectCode"
              disabled$="[[C.controlsDisabled]"
              i18n-content="loginControllerPairingScreenRejectCodeBtn">
          </paper-button>
          <paper-button slot="buttons" on-tap="userActed" action="acceptCode"
              disabled$="[[C.controlsDisabled]]"
              i18n-content="loginControllerPairingScreenAcceptCodeBtn">
          </paper-button>
        </controller-pairing-page>

        <controller-pairing-page name="host-network-error" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenHostNetworkErrorTitle">
          </div>
        </controller-pairing-page>

        <controller-pairing-page name="host-update" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenUpdateTitle">
          </div>
          <div i18n-content="loginControllerPairingScreenUpdateText"></div>
          <paper-progress indeterminate></paper-progress>
        </controller-pairing-page>

        <controller-pairing-page name="host-connection-lost" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenConnectionLostTitle">
          </div>
          <div i18n-content="loginControllerPairingScreenConnectionLostText">
          </div>
          <paper-progress indeterminate></paper-progress>
        </controller-pairing-page>

        <controller-pairing-page name="enrollment-introduction" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenEnrollTitle">
          </div>
          <p i18n-content="loginControllerPairingScreenEnrollText1"></p>
          <p>
            <strong i18n-content="loginControllerPairingScreenEnrollText2">
            </strong>
          </p>
          <paper-button slot="buttons" on-tap="userActed"
              action="proceedToAuthentication"
              disabled$="[[C.controlsDisabled]]"
              i18n-content="loginControllerPairingScreenContinueBtn">
          </paper-button>
        </controller-pairing-page>

        <controller-pairing-page name="authentication" class="split">
          <div slot="title"
              i18n-content="loginControllerPairingScreenEnrollTitle">
          </div>
          <div>Not implemented.</div>
        </controller-pairing-page>

        <controller-pairing-page name="host-enrollment" class="progress">
          <!-- This title contains <strong> tag inside. -->
          <html-echo slot="title"
              content="[[getHostEnrollmentStepTitle_(C.enrollmentDomain)]]">
          </html-echo>
        </controller-pairing-page>

        <controller-pairing-page name="host-enrollment-error" class="progress">
          <div slot="title"
              i18n-content="loginControllerPairingScreenEnrollmentErrorTitle">
          </div>
          <div
              i18n-content="loginControllerPairingScreenEnrollmentErrorHostRestarts">
          </div>
        </controller-pairing-page>

        <controller-pairing-page name="pairing-done" class="big-font">
          <div slot="title"
              i18n-content="loginControllerPairingScreenSuccessTitle">
          </div>
          <div><span>[[getSuccessMessage_(selectedDevice)]]</div>
          <paper-button slot="buttons" on-tap="userActed" action="startSession"
              disabled$="{{C.controlsDisabled}}"
              i18n-content="loginControllerPairingScreenContinueToHangoutsBtn">
          </paper-button>
        </controller-pairing-page>
      </neon-animated-pages>
    </div>
  </template>
</dom-module>