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

<link rel="import" href="chrome://resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-setup-pin-dialog">
  <template>
    <style include="settings-shared">
      #pinKeyboardDiv {
        justify-content: center;
      }
    </style>
    <cr-dialog id="dialog" on-close="close"
        close-text="$i18n{close}">
      <div slot="title">[[getTitleMessage_(isConfirmStep_)]]</div>
      <div slot="body">
        <!-- PIN keyboard -->
        <div id="pinKeyboardDiv" class="settings-box continuation">
          <setup-pin-keyboard id="pinKeyboard"
              enable-submit="{{enableSubmit_}}"
              is-confirm-step="{{isConfirmStep_}}"
              on-pin-submit="onPinSubmit_"
              on-set-pin-done="onSetPinDone_"
              set-modes="{{setModes}}"
              quick-unlock-private="[[quickUnlockPrivate]]"
              write-uma="[[writeUma_]]">
          </setup-pin-keyboard>
        </div>
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCancelTap_">
          $i18n{cancel}
        </cr-button>
        <cr-button class="action-button" on-click="onPinSubmit_"
            disabled$="[[!enableSubmit_]]">
          <span>[[getContinueMessage_(isConfirmStep_)]]</span>
        </cr-button>
      </div>
    </cr-dialog>
  </template>

  <script src="setup_pin_dialog.js"></script>
</dom-module>
