<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/polymer.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-radio-group/paper-radio-group.html">
<link rel="import" href="/people_page/lock_state_behavior.html">
<link rel="import" href="/people_page/password_prompt_dialog.html">
<link rel="import" href="/people_page/setup_pin_dialog.html">
<link rel="import" href="/prefs/prefs_behavior.html">
<link rel="import" href="/route.html">
<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-lock-screen">
  <template>
    <style include="settings-shared"></style>
    <style>
      .radio-indent {
        margin-left: 28px;
      }

      paper-button {
        text-transform: none;
      }
    </style>

    <div>
      <div class="list-frame">
        <paper-radio-group selected="{{selectedUnlockType}}">
          <paper-radio-button name="password">
            $i18n{lockScreenPasswordOnly}
          </paper-radio-button>
          <paper-radio-button name="pin+password">
            $i18n{lockScreenPinOrPassword}
          </paper-radio-button>
          <div class="settings-box continuation radio-indent"
               hidden$="[[!showConfigurePinButton_(selectedUnlockType)]]">
            <paper-button is="action-link" on-tap="onConfigurePin_">
              [[getSetupPinText_(hasPin)]]
            </paper-button>
          </div>
        </paper-radio-group>
      </div>

      <div class="settings-box single-column">
        <settings-checkbox pref="{{prefs.settings.enable_screen_lock}}"
                           label="$i18n{enableScreenlock}">
        </settings-checkbox>
      </div>

      <settings-password-prompt-dialog id="passwordPrompt"
                                       on-close="onPasswordClosed_"
                                       set-modes="{{setModes_}}">
      </settings-password-prompt-dialog>
      <settings-setup-pin-dialog id="setupPin" on-done="onPinSetupDone_"
                                 set-modes="[[setModes_]]">
      </settings-setup-pin-dialog>
    </div>
  </template>

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