<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/polymer/layout.html">
<link rel="import" href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html">
<link rel="import" href="chrome://resources/polymer/core-animated-pages/transitions/cross-fade.html">

<!--
  Password changed UI for the New Gaia flow.
  Contains two cards with a fade transition between them:
    1. Old password input form.
    2. Warning about data loss
    3. Spinner with notice "Please wait";

  Example:
    <gaia-password-changed id="gaia-password-changed" hidden>
    </gaia-password-changed>

  Attributes:
   'email' - displayed email in header.

  Events:
    'passwordEnter' - fired when user enters password. Fires with an argument
                     |password|.
    'proceedAnyway' - fired when user decides to skip old password and
                      lose all the data in cryptohome.
    'cancel'        - fired when user press X-button.

  Methods:
    'invalidate' - mark password input as invalid.
    'reset'      - reset element, sets in on the first screen and enables
                   buttons.
    'focus'      - if current card is the first one it focuses password input.

-->
<polymer-element name="gaia-password-changed" vertical layout
    attributes="email">
  <template>
    <link rel="stylesheet" href="gaia_password_changed.css">
    <core-animated-pages id="animatedPages" transitions="cross-fade-all" flex
        on-core-animated-pages-transition-end="{{onTransitionEnd}}">
      <section flex>
        <gaia-card id="oldPasswordCard">
          <gaia-header class="header" email="{{email}}">
          </gaia-header>
          <div horizontal layout center class="footer gaia-body-text">
            <p i18n-content="passwordChangedTitle">
            </p>
          </div>
          <gaia-input-form class="footer" id="oldPasswordInputForm"
              i18n-values="buttonText:nextButtonText">
            <gaia-input id="oldPasswordInput" type="password"
                i18n-values="error:oldPasswordIncorrect;
                             label:oldPasswordHint">
            </gaia-input>
            <gaia-paper-button noink i18n-content="forgotOldPasswordButtonText"
                class="link-button"
                on-tap="{{onForgotPasswordClicked}}">
            </gaia-paper-button>
          </gaia-input-form>
        </gaia-card>
      </section>
      <section flex>
        <gaia-card>
          <gaia-header class="header" email="{{email}}">
          </gaia-header>
          <div class="footer">
            <div horizontal layout center class="gaia-body-text">
              <core-icon icon="warning"></core-icon>
              <p flex i18n-content="passwordChangedProceedAnywayTitle">
              </p>
            </div>
            <div horizontal layout justified center>
              <gaia-paper-button noink i18n-content="passwordChangedTryAgain"
                  class="link-button"
                  on-tap="{{onTryAgainClicked}}">
              </gaia-paper-button>
              <gaia-raised-on-focus-button id="proceedAnywayBtn"
                  class="blue-button" on-tap="{{onProceedClicked}}"
                  i18n-content="proceedAnywayButton">
              </gaia-raised-on-focus-button>
            </div>
          </div>
        </gaia-card>
      </section>
      <section flex vertical layout center-justified>
        <throbber-notice i18n-values="text:gaiaLoadingNewGaia" self-center>
        </throbber-notice>
      </section>
    </core-animated-pages>
    <button id="closeButton" is="gaia-icon-button" icon="close"
        i18n-values="aria-label:closeButton" on-click="{{onClose}}">
    </button>
  </template>
</polymer-element>
