<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/html/web_ui_listener_behavior.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-checkbox/paper-checkbox.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
<link rel="import" href="/people_page/sync_browser_proxy.html">
<link rel="import" href="/route.html">
<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-sync-page">
  <template>
    <style include="settings-shared">
      #create-password-box,
      #reset-sync-message-box {
        /* In order to line up with the encryption radio box text. */
        -webkit-margin-start: 36px;
      }

      paper-input {
        width: var(--paper-input-max-width);
        --paper-input-container-focus-color: var(--google-blue-500);
        --paper-input-container-input: {
          font-size: inherit;
        };
      }

      #saveNewPassphrase {
        margin-top: 20px;
      }

      #existingPassphraseContainer,
      #passphraseRecoverHint {
        align-items: flex-end;
      }

      #existingPassphraseInput {
        /* The submit button for the existing passphrase is on the same line. */
        -webkit-margin-end: 16px;
        display: inline-block;
        --paper-input-container: {
          padding: 0;
        };
      }
    </style>
    <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_)]]">
      <div class="settings-box first">
        <paper-checkbox id="syncAllDataTypesCheckbox"
            checked="{{syncPrefs.syncAllDataTypes}}"
            on-change="onSyncAllDataTypesChanged_">
          $i18n{syncEverythingCheckboxLabel}
        </paper-checkbox>
      </div>

      <div class="list-frame">
        <paper-checkbox checked="{{syncPrefs.appsSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.appsRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]">
          $i18n{appCheckboxLabel}
        </paper-checkbox>

        <!-- Autofill has a special on-change handler to deal with
             Payments integriation. -->
        <paper-checkbox checked="{{syncPrefs.autofillSynced}}"
            on-change="onAutofillDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.autofillRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]">
          $i18n{autofillCheckboxLabel}
        </paper-checkbox>

        <paper-checkbox checked="{{syncPrefs.bookmarksSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.bookmarksRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]">
          $i18n{bookmarksCheckboxLabel}
        </paper-checkbox>
        <paper-checkbox checked="{{syncPrefs.extensionsSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.extensionsRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]">
          $i18n{extensionsCheckboxLabel}
        </paper-checkbox>
        <paper-checkbox checked="{{syncPrefs.typedUrlsSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.typedUrlsRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]">
          $i18n{historyCheckboxLabel}
        </paper-checkbox>
        <paper-checkbox checked="{{syncPrefs.passwordsSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.passwordsRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]">
          $i18n{passwordsCheckboxLabel}
        </paper-checkbox>
        <paper-checkbox checked="{{syncPrefs.preferencesSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.preferencesRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.preferencesEnforced)]]">
          $i18n{settingsCheckboxLabel}
        </paper-checkbox>
        <paper-checkbox checked="{{syncPrefs.themesSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.themesRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]">
          $i18n{themesAndWallpapersCheckboxLabel}
        </paper-checkbox>
        <paper-checkbox checked="{{syncPrefs.tabsSynced}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.tabsRegistered]]"
            disabled="[[shouldSyncCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]">
          $i18n{openTabsCheckboxLabel}
        </paper-checkbox>

        <!-- 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.-->
        <paper-checkbox checked="{{syncPrefs.paymentsIntegrationEnabled}}"
            on-change="onSingleSyncDataTypeChanged_" class="list-item"
            hidden="[[!syncPrefs.autofillRegistered]]"
            disabled="[[shouldPaymentsCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]">
          $i18n{enablePaymentsIntegrationCheckboxLabel}
          <a href="$i18nRaw{autofillHelpURL}" target="_blank">
            $i18n{learnMore}
          </a>
        </paper-checkbox>
      </div>

      <div class="settings-box two-line single-column" actionable
          on-tap="onManageSyncedDataTap_">
        <div>$i18n{manageSyncedDataTitle}</div>
        <div class="secondary">$i18n{manageSyncedDataDescription}</div>
      </div>

      <div class="settings-box two-line single-column">
        <div>$i18n{encryptionOptionsTitle}</div>
        <div class="secondary">$i18n{syncDataEncryptedText}</div>
      </div>

      <div id="encryptionRadioGroupContainer" class="list-frame"
          hidden="[[syncPrefs.passphraseRequired]]">
        <paper-radio-group
            selected="[[selectedEncryptionRadio_(
                syncPrefs.passphraseTypeIsCustom)]]"
            on-paper-radio-group-changed="onEncryptionRadioSelectionChanged_">
          <paper-radio-button name="encrypt-with-google"
              class="list-item" disabled="[[syncPrefs.encryptAllData]]">
            $i18n{encryptWithGoogleCredentialsLabel}
          </paper-radio-button>
          <paper-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>$i18nRaw{encryptWithSyncPassphraseLabel}</span>
            </template>
          </paper-radio-button>
        </paper-radio-group>
        <div id="reset-sync-message-box" class="list-item"
            hidden="[[!syncPrefs.encryptAllData]]">
          <span>$i18nRaw{passphraseResetHint}</span>
        </div>
      </div>

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

      <template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
        <div 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">
            <paper-input id="existingPassphraseInput" type="password"
                value="{{existingPassphrase_}}"
                placeholder="$i18n{passphrasePlaceholder}"
                error-message="$i18n{incorrectPassphraseError}">
            </paper-input>
            <paper-button id="submitExistingPassphrase"
                on-tap="onSubmitExistingPassphraseTap_" class="action-button"
                disabled="[[!existingPassphrase_]]">
              $i18n{submitPassphraseButton}
            </paper-button>
          </div>
          <div id="passphraseRecoverHint" class="list-item">
            <span>$i18nRaw{passphraseRecover}</span>
          </div>
        </div>
      </template>
    </div>
  </template>
  <script src="sync_page.js"></script>
</dom-module>
