<div id="sync-setup-overlay" class="page" hidden>
  <div class="close-button"></div>
  <div id="sync-setup-configure" hidden>
    <div id="confirm-sync-preferences">
      <h1 i18n-content="confirmSyncPreferences"></h1>
      <div id="sync-instructions-container" class="content-area">
        <span i18n-content="chooseDataTypesInstructions"></span>
        <a id="encryption-help-link" target="_blank"
            i18n-values="href:syncEverythingHelpURL" i18n-content="learnMore">
        </a>
      </div>
      <div>
        <div class="action-area">
          <div class="action-area-link-container">
            <button id="customize-link" type="button"
                i18n-content="customizeLinkLabel"
                class="link-button">
            </button>
          </div>
          <div id="confirm-everything-throbber" class="throbber"></div>
          <div class="button-strip">
            <input id="confirm-everything-cancel" type="button"
                i18n-values="value:cancel">
            <input id="confirm-everything-ok" type="button"
                i18n-values="value:syncEverything">
          </div>
        </div>
      </div>
    </div>
    <div id="customize-sync-preferences" hidden>
      <h1 i18n-content="syncSetupConfigureTitle"></h1>
      <form id="choose-data-types-form">
        <div id="sync-configure-content" class="content-area">
          <div id="sync-select-container">
            <select id="sync-select-datatypes">
              <option i18n-content="syncAllDataTypes" selected></option>
              <option i18n-content="chooseDataTypes"></option>
              <!-- The syncNothing element is to be removed for M29.
                   TODO(rsimha): Revisit this for M30.
                   See http://crbug.com/252049.
              -->
            </select>
            <div id="choose-data-types-body">
              <div id="apps-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="apps-checkbox" type="checkbox">
                  <span i18n-content="apps" i18n-values="title:apps"></span>
                </label>
              </div>
              <div id="autofill-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="autofill-checkbox" type="checkbox">
                  <span i18n-content="autofill" i18n-values="title:autofill">
                  </span>
                </label>
              </div>
              <div class="sync-type-checkbox checkbox">
                <label>
                  <input id="bookmarks-checkbox" type="checkbox">
                  <span i18n-content="bookmarks"
                      i18n-values="title:bookmarks"></span>
                </label>
              </div>
              <div id="extensions-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="extensions-checkbox" type="checkbox">
                  <span i18n-content="extensions"
                      i18n-values="title:extensions"></span>
                </label>
              </div>
              <div id="omnibox-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="typed-urls-checkbox" type="checkbox">
                  <span i18n-content="typedURLs"
                      i18n-values="title:typedURLs"></span>
                </label>
              </div>
              <div id="passwords-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="passwords-checkbox" type="checkbox">
                  <span i18n-content="passwords"
                      i18n-values="title:passwords"></span>
                </label>
              </div>
              <div class="sync-type-checkbox checkbox">
                <label>
                  <input id="preferences-checkbox" type="checkbox">
                  <span i18n-content="preferences"
                      i18n-values="title:preferences"></span>
                </label>
              </div>
              <div class="sync-type-checkbox checkbox">
                <label>
                  <input id="themes-checkbox" type="checkbox">
                  <span i18n-content="themes" i18n-values="title:themes">
                  </span>
                </label>
              </div>
              <div id="tabs-item" class="sync-type-checkbox checkbox">
                <label>
                  <input id="tabs-checkbox" type="checkbox">
                  <span i18n-content="openTabs" il8n-values="title:tabs">
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div class="sync-configuration-errors">
            <div id="error-text" i18n-content="syncZeroDataTypesError"
                class="sync-configuration-error reset-hidden" hidden></div>
          </div>
          <div id="customize-sync-encryption-new">
            <hr>
            <h4 i18n-content="encryptionSectionTitle"></h4>
            <div id="encryption-section-message"
                i18n-content="encryptionSectionMessage"></div>
            <div id="sync-new-encryption-section-container">
              <div class="radio">
                <label>
                  <input id="basic-encryption-option" name="encrypt-new"
                      type="radio" value="full">
                  <span id="basic-encryption-body"
                      i18n-content="basicEncryptionOption"></span>
                </label>
              </div>
              <div class="radio">
                <label>
                  <input id="full-encryption-option" name="encrypt-new"
                      type="radio" value="full">
                  <span id="full-encryption-body"
                      i18n-content="fullEncryptionOption"></span>
                </label>
                <a i18n-values="href:encryptionHelpURL" target="_blank"
                    i18n-content="learnMore"></a>
              </div>
            </div>
          </div>
          <div id="sync-custom-passphrase-container"
              class="sync-customize-section-container">
            <div id="sync-custom-passphrase"
                class="reset-hidden" hidden>
              <div id="sync-passphrase-message">
                <span i18n-content="sectionExplicitMessagePrefix"></span>
                <a href="https://www.google.com/settings/chrome/sync/"
                    target="_blank"
                    i18n-content="sectionExplicitMessagePostfix"></a>
                <span>.</span>
              </div>
              <div class="sync-custom-passphrase-input">
                <input id="custom-passphrase" type="password"
                    class="reset-value"
                    i18n-values="placeholder:passphraseLabel">
              </div>
              <div class="sync-custom-passphrase-input">
                <input id="confirm-passphrase" type="password"
                    class="reset-value"
                    i18n-values="placeholder:confirmLabel">
              </div>
              <div id="empty-error" class="error"
                  i18n-content="emptyErrorMessage" hidden></div>
              <div id="mismatch-error" class="error"
                  i18n-content="mismatchErrorMessage" hidden></div>
            </div>
          </div>
          <div id="sync-existing-passphrase-container" hidden>
            <div id="enter-passphrase">
              <span id="normal-body" i18n-content="enterPassphraseBody" hidden>
              </span>
              <span id="google-passphrase-needed-body"
                  i18n-content="enterGooglePassphraseBody" hidden>
              </span>
              <a id="passphrase-learn-more" i18n-content="learnMore"
                  i18n-values="href:syncErrorHelpURL" class="reset-hidden"
                  target="_blank" hidden>
              </a>
            </div>
            <div id="passphrase-input">
              <input id="passphrase" name="passphrase" type="password"
                  class="reset-value"
                  i18n-values="placeholder:passphraseLabel">
              <div id="incorrect-passphrase" class="error"
                   i18n-content="incorrectPassphrase" hidden>
              </div>
            </div>
            <div id="sync-passphrase-warning"
                 i18n-values=".innerHTML:passphraseRecover" hidden>
            </div>
          </div>
        </div>
        <div class="action-area">
          <div class="action-area-link-container">
            <button id="use-default-link" type="button"
                i18n-content="useDefaultSettings"
                class="link-button">
            </button>
          </div>
          <div id="choose-datatypes-throbber" class="throbber"></div>
          <div class="button-strip">
            <input id="choose-datatypes-cancel" type="button"
                i18n-values="value:cancel">
            <input id="choose-datatypes-ok" type="submit"
                i18n-values="value:ok">
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="sync-setup-spinner" hidden>
    <h1 i18n-content="syncSetupSpinnerTitle"></h1>
    <div class="action-area button-strip">
      <input id="sync-spinner-cancel" type="button" i18n-values="value:cancel">
    </div>
  </div>
  <div id="sync-setup-timeout" hidden>
    <h1 i18n-content="syncSetupTimeoutTitle"></h1>
    <div class="content-area">
      <span i18n-content="syncSetupTimeoutContent"></span>
    </div>
    <div class="action-area button-strip">
      <button id="timeout-ok" i18n-content="ok"></button>
    </div>
  </div>
  <div id="sync-setup-stop-syncing" hidden>
    <h1 i18n-content="stopSyncingTitle"></h1>
    <div class="content-area">
      <span i18n-values=".innerHTML:stopSyncingExplanation"></span>
    </div>
    <div class="action-area button-strip">
      <input id="stop-syncing-cancel" type="button"
          i18n-values="value:cancel">
      <input id="stop-syncing-ok" type="button"
          i18n-values="value:stopSyncingConfirm">
    </div>
  </div>
</div>