<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_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/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="easy_unlock_browser_proxy.html">
<link rel="import" href="easy_unlock_turn_off_dialog.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;
      }

      #easyUnlock .start {
        /* When the easy unlock toggle is shown, the easy unlock section's
         * content becomes squashed to the top and bottom edges. Use padding to
         * ensure the easy unlock content looks correct.
         */
        padding: 11px 0;
      }

      #lockOptionsDiv {
        display: block;
      }

      cr-radio-button {
        --cr-radio-button-label: {
          display: flex;
          line-height: 154%;  /* Apply 20px line-height to paper radio button
                                 text to match rest of settings line-heights. */
          width: 100%;
        };
      }

      #pinPasswordDiv,
      #pinPasswordSecondaryActionDiv {
        margin: auto;
      }

      #easyUnlockSettingsCollapsible {
        @apply --settings-list-frame-padding;
      }

      .no-padding {
        padding: 0;
      }

      .underbar {
        border-bottom: var(--settings-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>

      <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" class="start">
                  $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. -->
                    <paper-button id="setupPinButton" class="secondary-button"
                        on-click="onConfigurePin_"
                        stop-keyboard-event-propagation>
                      [[getSetupPinText_(hasPin)]]
                    </paper-button>
                  </div>
                </template>
              </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">
            <paper-button class="secondary-button"
                on-click="onEditFingerprints_"
                aria-label="$i18n{lockScreenEditFingerprints}"
                aria-descibedby="lockScreenEditFingerprintsSecondary">
              $i18n{lockScreenSetupFingerprintButton}
            </paper-button>
          </div>
        </div>
      </template>

      <template is="dom-if" if="[[easyUnlockAvailable_(
          multideviceSettingsEnabled_, easyUnlockAllowed_,
          easyUnlockInLegacyHostMode_)]]">
        <div id="easyUnlock" class="settings-box two-line">
          <div class="start">
            <div>$i18n{easyUnlockSectionTitle}</div>
            <div class="secondary">
              [[getEasyUnlockDescription_(easyUnlockEnabled_,
                  '$i18nPolymer{easyUnlockDescription}',
                  '$i18nPolymer{easyUnlockSetupIntro}')]]
              <a target="_blank" href="$i18n{easyUnlockLearnMoreURL}">
                $i18n{learnMore}
              </a>
            </div>
          </div>
          <template is="dom-if" if="[[easyUnlockAvailable_(
          multideviceSettingsEnabled_, easyUnlockAllowed_,
          easyUnlockInLegacyHostMode_)]]">
            <div class="separator"></div>
            <template is="dom-if" if="[[easyUnlockEnabled_]]">
              <paper-button id="easyUnlockTurnOff" class="secondary-button"
                  on-click="onEasyUnlockTurnOffTap_">
                $i18n{easyUnlockTurnOffButton}
              </paper-button>
            </template>
          </template>
        </div>
        <iron-collapse opened="[[easyUnlockEnabled_]]"
            id="easyUnlockSettingsCollapsible">
          <settings-toggle-button
              class="continuation no-padding underbar"
              pref="{{prefs.proximity_auth.is_chromeos_login_enabled}}"
              label="$i18n{easyUnlockAllowSignInLabel}">
          </settings-toggle-button>
          <div class="settings-box continuation no-padding">
            <div class="start">
              $i18n{easyUnlockProximityThresholdLabel}
            </div>
            <settings-dropdown-menu
              pref="{{prefs.easy_unlock.proximity_threshold}}"
              menu-options="[[easyUnlockProximityThresholdMapping_]]">
            </settings-dropdown-menu>
          </div>
        </iron-collapse>
      </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>

      <template is="dom-if" if="[[showEasyUnlockTurnOffDialog_]]" restamp>
        <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog"
            on-close="onEasyUnlockTurnOffDialogClose_">
        </easy-unlock-turn-off-dialog>
      </template>
    </div>
  </template>

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