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

<link rel="import" href="chrome://resources/cr_components/chromeos/quick_unlock/lock_screen_constants.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="fingerprint_browser_proxy.html">
<link rel="import" href="lock_state_behavior.html">
<link rel="import" href="lock_screen_password_prompt_dialog.html">
<link rel="import" href="setup_pin_dialog.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">

<dom-module id="settings-lock-screen">
  <template>
    <style include="settings-shared">
      cr-policy-indicator {
        margin-inline-start: auto;
        /* Align the indicator with the h2 that it is associated with. */
        padding-bottom: 12px;
        padding-top: 24px;
      }

      #lockOptionsDiv {
        display: block;
      }

      #pinPasswordDiv {
        display: flex;
      }

      #pinPasswordLabel {
        flex: 1;
      }

      #pinPasswordLabel,
      #pinPasswordSecondaryActionDiv {
        margin: auto;
      }

      .underbar {
        border-bottom: var(--cr-separator-line);
      }

      #unlockType[disabled] {
        opacity: var(--settings-disabled-opacity);
        pointer-events: none;
      }
    </style>

    <div>
      <settings-toggle-button id="enableLockScreen" class="first"
          pref="{{prefs.settings.enable_screen_lock}}"
          on-settings-boolean-control-change="onScreenLockChange_" no-set-pref
          label="$i18n{enableScreenlock}">
      </settings-toggle-button>

      <settings-toggle-button id="enableLockScreenMediaKeys"
          hidden="[[!lockScreenMediaKeysPreferenceEnabled_]]"
          pref="{{prefs.ash.lock_screen_media_keys_enabled}}"
          label="$i18n{lockScreenMediaKeys}">
      </settings-toggle-button>

      <template is="dom-if" if="[[quickUnlockEnabled_]]">
        <div id="lockOptionsDiv">
          <div class="settings-box">
            <h2>[[selectLockScreenOptionsString(hasPinLogin)]]</h2>
            <template is="dom-if" if="[[quickUnlockDisabledByPolicy_]]">
              <cr-policy-indicator indicator-type="userPolicy">
              </cr-policy-indicator>
            </template>
          </div>
          <div class="list-frame" >
            <cr-radio-group id="unlockType"
                disabled$="[[quickUnlockDisabledByPolicy_]]"
                selected="{{selectedUnlockType}}">
              <cr-radio-button name="password" class="list-item underbar">
                <div class="start">
                  $i18n{lockScreenPasswordOnly}
                </div>
              </cr-radio-button>
              <cr-radio-button name="pin+password" class="list-item">
                <div id="pinPasswordDiv">
                  <div id="pinPasswordLabel">
                    $i18n{lockScreenPinOrPassword}
                  </div>
                  <template is="dom-if"
                      if="[[showConfigurePinButton_(selectedUnlockType)]]">
                    <div class="separator"></div>
                    <div id="pinPasswordSecondaryActionDiv"
                        class="secondary-action">
                      <!-- Use stop-keyboard-event-propagation to prevent
                           triggering this when focused after closing the
                           dialog. -->
                      <cr-button id="setupPinButton" on-click="onConfigurePin_"
                          stop-keyboard-event-propagation>
                        [[getSetupPinText_(hasPin)]]
                      </cr-button>
                    </div>
                  </template>
                </div>
              </cr-radio-button>
            </cr-radio-group>
          </div>
        </div>
      </template>

      <template is="dom-if" if="[[lockScreenNotificationsEnabled_]]">
        <h2 class="settings-box">
          $i18n{lockScreenNotificationTitle}
        </h2>
        <div class="list-frame">
          <settings-radio-group
              pref="{{prefs.ash.message_center.lock_screen_mode}}">
            <template is="dom-if"
                if="[[lockScreenHideSensitiveNotificationSupported_]]">
              <cr-radio-button name="hideSensitive" class="list-item underbar"
                   pref="[[prefs.ash.message_center.lock_screen_mode]]"
                   label="$i18n{lockScreenNotificationHideSensitive}">
              </cr-radio-button>
            </template>
            <cr-radio-button name="show" class="list-item underbar"
                 pref="[[prefs.ash.message_center.lock_screen_mode]]"
                 label="$i18n{lockScreenNotificationShow}">
            </cr-radio-button>
            <cr-radio-button name="hide" class="list-item"
                 pref="[[prefs.ash.message_center.lock_screen_mode]]"
                 label="$i18n{lockScreenNotificationHide}">
            </cr-radio-button>
          </settings-radio-group>
        </div>
      </template>

      <template is="dom-if" if="[[fingerprintUnlockEnabled_]]">
        <div id="fingerprintDiv" class="settings-box two-line">
          <div class="start">
            $i18n{lockScreenEditFingerprints}
            <div class="secondary" id="lockScreenEditFingerprintsSecondary">
              [[getDescriptionText_(numFingerprints_)]]
            </div>
          </div>
          <div class="separator"></div>
          <div class="secondary-action">
            <cr-button on-click="onEditFingerprints_"
                aria-label="$i18n{lockScreenEditFingerprints}"
                aria-descibedby="lockScreenEditFingerprintsSecondary">
              $i18n{lockScreenSetupFingerprintButton}
            </cr-button>
          </div>
        </div>
      </template>

      <template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
        <settings-lock-screen-password-prompt-dialog
            id="lockScreenPasswordPrompt"
            on-close="onPasswordPromptDialogClose_" set-modes="{{setModes_}}"
            auth-token="{{authToken}}">
        </settings-lock-screen-password-prompt-dialog>
      </template>

      <template is="dom-if" if="[[showSetupPinDialog_]]" restamp>
        <settings-setup-pin-dialog id="setupPin" set-modes="[[setModes_]]"
            on-close="onSetupPinDialogClose_">
        </settings-setup-pin-dialog>
      </template>
    </div>
  </template>

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