<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.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/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">

<dom-module id="viewer-password-screen">
  <template>
    <style include="iron-flex iron-flex-alignment"></style>
    <paper-dialog id="dialog" modal no-cancel-on-esc-key
        entry-animation="fade-in-animation" exit-animation="fade-out-animation">
      <div id="message">{{strings.passwordPrompt}}</div>
      <div class="horizontal layout start">
        <paper-input-container id="password-container" class="flex"
            no-label-float invalid="[[invalid]]">
          <input is="iron-input" id="password" type="password" size="20"
              on-keypress="handleKey" autofocus>
          </input>
          <paper-input-error>{{strings.passwordInvalid}}</paper-input-error>
        </paper-input-container>
        <paper-button id="submit" on-click="submit">
          {{strings.passwordSubmit}}
        </paper-button>
      </div>
    </paper-dialog>
  </template>
</dom-module>
<script src="viewer-password-screen.js"></script>
