chrome/browser/resources/settings/people_page/sync_page.html

    <style include="cr-shared-style settings-shared iron-flex">
      #sync-separator {
        border-bottom: var(--cr-separator-line);
      }

      #create-password-box {
        /* In order to line up with the encryption radio box text. */
        margin-inline-start: var(--cr-section-indent-width);
      }

      #create-password-box {
        margin-bottom: 1em;
      }

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

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

      #existingPassphrase {
        border-bottom: var(--cr-separator-line);
        border-top: var(--cr-separator-line);
        /* This particular list frame is not indented. */
        padding-inline-start: var(--cr-section-padding);
      }

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

      #passphraseRecoverHint {
        align-items: center;
      }

      #other-sync-items {
        padding-bottom: 8px;
      }

      .passphrase-reset-icon {
        margin-inline-end: 8px;
      }

      #disabled-by-admin-icon {
        text-align: center;
        width: 40px;
      }

      #toast {
        left: 0;
        z-index: 1;
      }

      :host-context([dir='rtl']) #toast {
        left: auto;
        right: 0;
      }

      cr-link-row {
        padding-inline-end: 8px;
        padding-inline-start: 0;
      }
    </style>

    <template is="dom-if" if="[[shouldShowSyncAccountControl_(
        syncStatus.syncSystemEnabled)]]">
      <settings-sync-account-control embedded-in-subpage
          sync-status="[[syncStatus]]" prefs="{{prefs}}"
          promo-label-with-account=
              "$i18n{peopleSignInSyncPagePromptSecondaryWithAccount}"
          promo-label-with-no-account=
              "$i18n{peopleSignInSyncPagePromptSecondaryWithNoAccount}"
          on-sync-setup-done="onSyncSetupDone_">
      </settings-sync-account-control>
    </template>
    <div class="cr-row first" hidden="[[!syncDisabledByAdmin_]]">
      <iron-icon id="disabled-by-admin-icon" icon="cr20:domain"></iron-icon>
      <div class="flex cr-padded-text">
        $i18n{syncDisabledByAdministrator}
      </div>
    </div>

<if expr="chromeos or lacros">
    <!-- TODO(crbug.com/1231500): Remove this warning after Lacros side-by-side
      rollout stage. -->
    <template is="dom-if" if="[[shouldShowLacrosSideBySideWarning_()]]">
      <div class="cr-row first cr-padded-text">
        $i18n{syncSettingsLacrosSideBySideWarning}
      </div>
    </template>
</if>

    <template is="dom-if" if="[[shouldShowExistingPassphraseBelowAccount_(
        syncPrefs.passphraseRequired)]]"
        on-dom-change="focusPassphraseInput_">
      <div id="existingPassphrase" class="list-frame">
        <div id="existingPassphraseTitle" class="list-item">
            <div class="start cr-padded-text">
              <div>$i18n{existingPassphraseTitle}</div>
              <div class="secondary"
                  inner-h-t-m-l="[[existingPassphraseLabel_]]">
              </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_">
            <cr-button id="submitExistingPassphrase" slot="suffix"
                on-click="onSubmitExistingPassphraseTap_"
                class="action-button" disabled="[[!existingPassphrase_]]">
              $i18n{submitPassphraseButton}
            </cr-button>
          </cr-input>
        </div>
        <div id="passphraseRecoverHint" class="list-item">
          <div class="cr-padded-text">$i18nRaw{passphraseRecover}</div>
        </div>
      </div>
    </template>

    <div id="sync-separator" hidden="[[!syncSectionDisabled_]]"></div>

    <div id="sync-section" hidden="[[syncSectionDisabled_]]">
      <div class="cr-row first">
        <h2 class="cr-title-text">$i18n{sync}</h2>
      </div>

      <div id="[[pages_.SPINNER]]" class="cr-row first cr-padded-text"
          hidden$="[[!isStatus_(pages_.SPINNER, pageStatus_)]]">
        $i18n{syncLoading}
      </div>
      <div id="[[pages_.CONFIGURE]]"
          hidden$="[[!isStatus_(pages_.CONFIGURE, pageStatus_)]]">
        <div id="other-sync-items" class="list-frame">
          <cr-link-row id="sync-advanced-row"
              label="$i18n{syncAdvancedPageTitle}"
              role-description="$i18n{subpageArrowRoleDescription}"
              on-click="onSyncAdvancedClick_"></cr-link-row>

          <cr-link-row class="hr"
              label="$i18n{personalizeGoogleServicesTitle}"
              on-click="onActivityControlsClick_" external></cr-link-row>

          <cr-link-row id="syncDashboardLink" class="hr"
              label="$i18n{manageSyncedDataTitle}"
              on-click="onSyncDashboardLinkClick_"
              hidden="[[syncStatus.supervisedUser]]" external></cr-link-row>

          <cr-expand-button id="encryptionDescription"
              hidden="[[syncPrefs.passphraseRequired]]"
              expanded="{{encryptionExpanded_}}"
              class="hr">
            $i18n{encryptionOptionsTitle}
            <div class="secondary">
              $i18n{syncDataEncryptedText}
              <div on-click="onResetSyncClick_"
                  hidden="[[!syncPrefs.encryptAllData]]">
                <iron-icon icon="cr:info-outline"
                    class="passphrase-reset-icon">
                </iron-icon>
                $i18nRaw{passphraseResetHintEncryption}
              </div>
            </div>
          </cr-expand-button>

          <iron-collapse id="encryptionCollapse"
              opened="[[encryptionExpanded_]]">
            <settings-sync-encryption-options
                sync-status="[[syncStatus]]" sync-prefs="{{syncPrefs}}"
                existing-passphrase-label="[[existingPassphraseLabel_]]"
                on-passphrase-changed="onPassphraseChanged_">
            </settings-sync-encryption-options>
          </iron-collapse>

        </div>
      </div>
    </div>

    <div class="cr-row first">
      <h2 class="cr-title-text">
        $i18n{nonPersonalizedServicesSectionLabel}
      </h2>
    </div>
    <settings-personalization-options class="list-frame" prefs="{{prefs}}"
        page-visibility="[[pageVisibility]]" sync-status="[[syncStatus]]">
    </settings-personalization-options>

<if expr="not chromeos">
    <template is="dom-if" if="[[showSetupCancelDialog_]]" restamp>
      <cr-dialog id="setupCancelDialog" on-close="onSetupCancelDialogClose_"
          ignore-popstate>
        <div slot="title">$i18n{syncSetupCancelDialogTitle}</div>
        <div slot="body">$i18n{syncSetupCancelDialogBody}</div>
        <div slot="button-container">
          <cr-button class="cancel-button"
              on-click="onSetupCancelDialogBack_">
            $i18n{back}
          </cr-button>
          <cr-button class="action-button"
              on-click="onSetupCancelDialogConfirm_">
            $i18n{cancelSync}
          </cr-button>
        </div>
      </cr-dialog>
    </template>
</if>