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

<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.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/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
<link rel="import" href="sync_browser_proxy.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../privacy_page/personalization_options.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">

<if expr="not chromeos">
<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
</if>

<dom-module id="settings-sync-page">
  <template>
    <style include="settings-shared iron-flex">
      #create-password-box,
      #reset-sync-message-box-encryption,
      #reset-sync-message-box-user-events {
        /* In order to line up with the encryption radio box text. */
        -webkit-margin-start: var(--settings-indent-width);
      }

      #create-password-box .list-item {
        margin-bottom: var(--cr-form-field-bottom-spacing);
      }

      cr-input {
        --cr-input-width: var(--settings-input-max-width);
      }

      #existingPassphrase {
        /* This particular list frame is not indented. */
        -webkit-padding-start: var(--settings-box-row-padding);
        border-bottom: var(--settings-separator-line);
      }

      #submitExistingPassphrase {
        /* The submit button for the existing passphrase is on the same line. */
        -webkit-margin-start: 16px;
      }

      #passphraseRecoverHint {
        align-items: center;
      }

      #sync-data-types .list-item:not([hidden]) ~ .list-item:not([hidden]) {
        border-top: var(--settings-separator-line);
      }

      #other-sync-items > .list-item {
        border-top: var(--settings-separator-line);
      }

<if expr="not chromeos">
      #toast {
        color: white;
        left: 0;
        z-index: 1;
      }

      :host-context([dir='rtl']) #toast {
        left: auto;
        right: 0;
      }
</if>
    </style>
<if expr="not chromeos">
    <template is="dom-if" if="[[shouldShowSyncAccountControl_(diceEnabled,
        unifiedConsentEnabled, syncStatus.syncSystemEnabled,
        syncStatus.signinAllowed)]]">
      <settings-sync-account-control embedded-in-subpage
          sync-status="[[syncStatus]]"
          promo-label-with-account="$i18n{peopleSignInPrompt}"
          promo-label-with-no-account="$i18n{peopleSignInPrompt}"
          promo-secondary-label-with-account=
              "$i18n{peopleSignInPromptSecondaryWithAccount}"
          promo-secondary-label-with-no-account=
              "$i18n{peopleSignInPromptSecondaryWithNoAccount}">
      </settings-sync-account-control>
    </template>
</if>

    <template is="dom-if" if="[[shouldShowExistingPassphraseBelowAccount_(
      unifiedConsentEnabled, syncPrefs.passphraseRequired)]]">
      <div id="existingPassphrase" class="list-frame">
        <div id="existingPassphraseTitle" class="list-item">
            <div class="start">
              <div>$i18n{existingPassphraseTitle}</div>
              <div class="secondary">
                [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
                <a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
                  $i18n{learnMore}
                </a>
              </div>
            </div>
        </div>
        <div id="existingPassphraseContainer" class="list-item">
          <cr-input id="existingPassphraseInput" type="password"
              value="{{existingPassphrase_}}"
              placeholder="$i18n{passphrasePlaceholder}"
              error-message="$i18n{incorrectPassphraseError}"
              on-keypress="onSubmitExistingPassphraseTap_">
            <paper-button id="submitExistingPassphrase" slot="suffix"
                on-click="onSubmitExistingPassphraseTap_"
                class="action-button" disabled="[[!existingPassphrase_]]">
              $i18n{submitPassphraseButton}
            </paper-button>
          </cr-input>
        </div>
        <div id="passphraseRecoverHint" class="list-item">
          <span>$i18nRaw{passphraseRecover}</span>
        </div>
      </div>
    </template>

     <!-- A change of the unified consent toggle state is automatically handled
          in the C++ code after a change in the pref is observed. -->
    <settings-toggle-button id="unifiedConsentToggle" class="first"
        pref="{{prefs.unified_consent_given}}"
        label="$i18n{syncUnifiedConsentToggleTitle}"
        on-settings-boolean-control-change="onUnifiedConsentToggleChange_"
        hidden="[[!shouldShowUnifiedConsentToggle_(unifiedConsentEnabled,
                   syncStatus.disabled, syncStatus.signedIn)]]">
    </settings-toggle-button>
    <div class="settings-box two-line" id="sync-section-toggle"
        actionable$="[[!syncSectionDisabled_]]"
        on-click="toggleExpandButton_"
        hidden="[[!shouldShowSyncControls_(unifiedConsentEnabled,
                   syncStatus.disabled)]]">
      <div class="start">
        <div>$i18n{sync}</div>
        <div class="secondary">$i18n{syncDescription}</div>
      </div>
      <cr-expand-button expanded="{{syncSectionOpened_}}"
          disabled$="[[syncSectionDisabled_]]" alt="$i18n{syncExpandA11yLabel}">
      </cr-expand-button>
    </div>

    <iron-collapse id="sync-section" opened="[[syncSectionOpened_]]"
        hidden="[[syncSectionDisabled_]]">
      <div id="[[pages_.SPINNER]]" class="settings-box first"
          hidden$="[[!isStatus_(pages_.SPINNER, pageStatus_)]]">
        $i18n{syncLoading}
      </div>
      <div id="[[pages_.TIMEOUT]]" class="settings-box first"
          hidden$="[[!isStatus_(pages_.TIMEOUT, pageStatus_)]]">
        $i18n{syncTimeout}
      </div>
      <div id="[[pages_.CONFIGURE]]"
          hidden$="[[!isStatus_(pages_.CONFIGURE, pageStatus_)]]">
        <!-- TODO(http://crbug.com/862983) Remove this section once the Unified
             Consent feature is launched. -->
        <template is="dom-if" if="[[shouldShowExistingPassphraseInSyncSection_(
            unifiedConsentEnabled, syncPrefs.passphraseRequired)]]">
          <div id="existingPassphrase" class="list-frame">
            <div class="list-item">
              <span>
                [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
                <a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
                  $i18n{learnMore}
                </a>
              </span>
            </div>
            <div id="existingPassphraseContainer" class="list-item">
              <cr-input id="existingPassphraseInput" type="password"
                  value="{{existingPassphrase_}}"
                  placeholder="$i18n{passphrasePlaceholder}"
                  error-message="$i18n{incorrectPassphraseError}"
                  on-keypress="onSubmitExistingPassphraseTap_">
                <paper-button id="submitExistingPassphrase" slot="suffix"
                    on-click="onSubmitExistingPassphraseTap_"
                    class="action-button" disabled="[[!existingPassphrase_]]">
                  $i18n{submitPassphraseButton}
                </paper-button>
              </cr-input>
            </div>
            <div id="passphraseRecoverHint" class="list-item">
              <span>$i18nRaw{passphraseRecover}</span>
            </div>
          </div>
        </template>

        <div class="settings-box first" hidden="[[unifiedConsentEnabled]]">
          <div id="syncEverythingCheckboxLabel" class="start">
            $i18n{syncEverythingCheckboxLabel}
          </div>
          <cr-toggle id="syncAllDataTypesControl"
              checked="{{syncPrefs.syncAllDataTypes}}"
              on-change="onSyncAllDataTypesChanged_"
              aria-labelledby="syncEverythingCheckboxLabel">
          </cr-toggle>
        </div>

        <div class="list-frame" id="sync-data-types">
          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.appsRegistered]]">
            <div id="appCheckboxLabel" class="flex">
              $i18n{appCheckboxLabel}
            </div>
            <cr-toggle checked="{{syncPrefs.appsSynced}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]"
                aria-labelledby="appCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.autofillRegistered]]">
            <div id="autofillCheckboxLabel" class="flex">
              $i18n{autofillCheckboxLabel}
            </div>
            <!-- Autofill has a special on-change handler to deal with
                 Payments integration. -->
            <cr-toggle checked="{{syncPrefs.autofillSynced}}"
                on-change="onAutofillDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]"
                aria-labelledby="autofillCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.bookmarksRegistered]]">
            <div id="bookmarksCheckboxLabel" class="flex">
              $i18n{bookmarksCheckboxLabel}
            </div>
            <cr-toggle checked="{{syncPrefs.bookmarksSynced}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]"
                aria-labelledby="bookmarksCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.extensionsRegistered]]">
            <div id="extensionsCheckboxLabel" class="flex">
              $i18n{extensionsCheckboxLabel}
            </div>
            <cr-toggle checked="{{syncPrefs.extensionsSynced}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]"
                aria-labelledby="extensionsCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.typedUrlsRegistered]]">
            <div id="historyCheckboxLabel" class="flex">
              $i18n{historyCheckboxLabel}
            </div>
            <!-- TypedUrls has a special on-change handler to deal with user
                 events. -->
            <cr-toggle id="historyToggle"
                checked="{{syncPrefs.typedUrlsSynced}}"
                on-change="onTypedUrlsDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]"
                aria-labelledby="historyCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.passwordsRegistered]]">
            <div id="passwordsCheckboxLabel" class="flex">
              $i18n{passwordsCheckboxLabel}
            </div>
            <cr-toggle checked="{{syncPrefs.passwordsSynced}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]"
                aria-labelledby="passwordsCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.preferencesRegistered]]">
            <div id="settingsCheckboxLabel" class="flex">
              $i18n{settingsCheckboxLabel}
            </div>
            <cr-toggle checked="{{syncPrefs.preferencesSynced}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes,
                    syncPrefs.preferencesEnforced)]]"
                aria-labelledby="settingsCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.themesRegistered]]">
            <div id="themesAndWallpapersCheckboxLabel" class="flex">
              $i18n{themesAndWallpapersCheckboxLabel}
            </div>
            <cr-toggle checked="{{syncPrefs.themesSynced}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]"
                aria-labelledby="themesAndWallpapersCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.tabsRegistered]]">
            <div id="openTabsCheckboxLabel" class="flex">
              $i18n{openTabsCheckboxLabel}
            </div>
            <cr-toggle checked="{{syncPrefs.tabsSynced}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldSyncCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]"
                aria-labelledby="openTabsCheckboxLabel">
            </cr-toggle>
          </div>

          <div class="layout horizontal list-item"
              hidden="[[!syncPrefs.autofillRegistered]]">
            <!-- The Payments integration checkbox is a special case in many
                 ways. It's visible only if autofill is registered. It's
                 disabled and unchecked if autofill is unchecked.-->
            <div class="flex">
              $i18n{enablePaymentsIntegrationCheckboxLabel}
              <a href="$i18nRaw{autofillHelpURL}" target="_blank">
                $i18n{learnMore}
              </a>
            </div>
            <cr-toggle
                checked="{{syncPrefs.paymentsIntegrationEnabled}}"
                on-change="onSingleSyncDataTypeChanged_"
                disabled="[[shouldPaymentsCheckboxBeDisabled_(
                    syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]"
                aria-label="$i18n{enablePaymentsIntegrationCheckboxLabel}">
            </cr-toggle>
          </div>

          <!-- User events is disabled and unchecked if data is encrypted or
               typed urls are disabled. -->
          <template is="dom-if" if="[[unifiedConsentEnabled]]">
            <div class="layout horizontal list-item"
                hidden="[[!syncPrefs.userEventsRegistered]]">
              <div class="start" id="userEventsCheckboxLabel">
                <div>$i18n{userEventsCheckboxLabel}</div>
                <div class="secondary">
                  $i18n{userEventsCheckboxText}
                </div>
                <div id="reset-sync-message-box-user-events" class="list-item"
                  hidden="[[!syncPrefs.encryptAllData]]">
                  <span>
                    <iron-icon icon="settings:info-outline"></iron-icon>
                    $i18nRaw{passphraseResetHint}
                  </span>
                </div>
              </div>
              <cr-toggle id="userEventsToggle"
                  checked="{{userEventsToggleValue}}"
                  on-change="onUserEventsSyncDataTypeChanged_"
                  disabled="[[shouldUserEventsCheckboxBeDisabled_(
                      syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsSynced,
                      syncPrefs.userEventsEnforced, syncPrefs.encryptAllData)]]"
                  aria-labelledby="userEventsCheckboxLabel">
              </cr-toggle>
            </div>
          </template>
        </div>

        <div id="other-sync-items"
            class$="[[getListFrameClass_(unifiedConsentEnabled)]]">
          <template is="dom-if" if="[[driveSuggestAvailable_]]">
            <settings-toggle-button
                class$="[[getListItemClass_(unifiedConsentEnabled)]]"
                pref="{{prefs.documentsuggest.enabled}}"
                label="$i18n{driveSuggestPref}"
                sub-label="$i18n{driveSuggestPrefDesc}">
            </settings-toggle-button>
          </template>

          <a class$="inherit-color no-outline
              [[getListItemClass_(unifiedConsentEnabled)]]" tabindex="-1"
              target="_blank" href="$i18n{activityControlsUrl}"
              on-click="onActivityControlsTap_">
            <div class="start">
              $i18n{personalizeGoogleServicesTitle}
            </div>
            <paper-icon-button-light actionable class="icon-external">
              <button aria-label="$i18n{personalizeGoogleServicesTitle}">
              </button>
            </paper-icon-button-light>
          </a>

          <a class$="inherit-color no-outline
              [[getListItemClass_(unifiedConsentEnabled)]]" tabindex="-1"
              target="_blank" href="$i18n{syncDashboardUrl}">
            <div class="start">
              $i18n{manageSyncedDataTitle}
            </div>
            <paper-icon-button-light actionable class="icon-external">
              <button aria-label="$i18n{manageSyncedDataTitle}"></button>
            </paper-icon-button-light>
          </a>

          <div id="encryptionDescription"
              hidden="[[syncPrefs.passphraseRequired]]"
              class$="two-line single-column
                  [[getListItemClass_(unifiedConsentEnabled)]]">
            <div>$i18n{encryptionOptionsTitle}</div>
            <div class="secondary">$i18n{syncDataEncryptedText}</div>
          </div>

          <div id="encryptionRadioGroupContainer" class="list-frame"
              hidden="[[syncPrefs.passphraseRequired]]">
            <paper-radio-group disabled$="[[syncPrefs.encryptAllData]]"
                selected="[[selectedEncryptionRadio_(
                    syncPrefs.passphraseTypeIsCustom)]]"
                selectable="cr-radio-button"
                on-paper-radio-group-changed=
                    "onEncryptionRadioSelectionChanged_">
              <cr-radio-button name="encrypt-with-google"
                  class="list-item" disabled="[[syncPrefs.encryptAllData]]">
                $i18n{encryptWithGoogleCredentialsLabel}
              </cr-radio-button>
              <cr-radio-button name="encrypt-with-passphrase"
                  class="list-item" disabled="[[syncPrefs.encryptAllData]]">
                <template is="dom-if" if="[[syncPrefs.fullEncryptionBody]]">
                  <span>[[syncPrefs.fullEncryptionBody]]</span>
                </template>
                <template is="dom-if" if="[[!syncPrefs.fullEncryptionBody]]">
                  <span on-click="onLearnMoreTap_">
                    $i18nRaw{encryptWithSyncPassphraseLabel}
                  </span>
                </template>
              </cr-radio-button>
            </paper-radio-group>

            <!-- duplicated from above -->
            <div id="reset-sync-message-box-encryption" class="list-item"
                hidden="[[!syncPrefs.encryptAllData]]">
              <span>
                <iron-icon icon="settings:info-outline"></iron-icon>
                $i18nRaw{passphraseResetHint}
              </span>
            </div>

          </div>

          <template is="dom-if" if="[[creatingNewPassphrase_]]">
            <div class="list-frame">
              <div id="create-password-box"
                  on-keypress="onSaveNewPassphraseTap_">
                <div class="list-item">
                  <span>$i18nRaw{passphraseExplanationText}</span>
                </div>
                <cr-input id="passphraseInput" type="password"
                    value="{{passphrase_}}"
                    placeholder="$i18n{passphrasePlaceholder}"
                    error-message="$i18n{emptyPassphraseError}">
                </cr-input>
                <cr-input id="passphraseConfirmationInput" type="password"
                    value="{{confirmation_}}"
                    placeholder="$i18n{passphraseConfirmationPlaceholder}"
                    error-message="$i18n{mismatchedPassphraseError}">
                </cr-input>
                <paper-button id="saveNewPassphrase"
                    on-click="onSaveNewPassphraseTap_" class="action-button"
                    disabled="[[!isSaveNewPassphraseEnabled_(passphrase_,
                                                             confirmation_)]]">
                  $i18n{save}
                </paper-button>
              </div>
            </div>
          </template>

        </div>
      </div>
    </iron-collapse>
    <template is="dom-if" if="[[unifiedConsentEnabled]]">
      <div class="settings-box two-line" id="personalize-section-toggle"
          actionable on-click="toggleExpandButton_">
        <div class="start">
          <div>$i18n{nonPersonalizedServicesSectionLabel}</div>
          <div class="secondary">
            $i18n{nonPersonalizedServicesSectionDesc}
          </div>
        </div>
        <cr-expand-button expanded="{{personalizeSectionOpened_}}"
            alt="$i18n{syncExpandA11yLabel}">
        </cr-expand-button>
      </div>
      <iron-collapse id="personalize-section"
          opened="[[personalizeSectionOpened_]]">
        <settings-personalization-options class="list-frame" prefs="{{prefs}}"
            page-visibility="[[pageVisibility]]"
            unified-consent-enabled="[[unifiedConsentEnabled]]"
            unified-consent-given="{{prefs.unified_consent_given.value}}">
        </settings-personalization-options>
      </iron-collapse>
    </template>

<if expr="not chromeos">
    <cr-toast id="toast" open="[[syncStatus.setupInProgress]]">
      <div>$i18n{syncWillStart}</div>
      <paper-button on-click="onCancelSyncClick_">
        $i18n{cancelSync}
      </paper-button>
    </cr-toast>
</if>
  </template>
  <script src="sync_page.js"></script>
</dom-module>
