<div id="sync-setup-overlay" class="page hidden">
  <div id="sync-setup-login" class="hidden">
    <h1 i18n-content="syncSetupOverlayTitle"></h1>
    <div class="content-area">
      <div>
        <div id="top-blurb-error">
          <span id="error-signing-in" i18n-content="errorsigningin"></span>
          <span id="error-custom"></span>
        </div>
        <form id="gaia-login-form">
          <div id="gaia-login-box">
            <table id="content-table" cellspacing="0"
                cellpadding="5" width="75%" border="0" align="center">
              <tr>
                <td valign="top" style="text-align:center" nowrap="nowrap"
                    bgcolor="#e8eefa">
                  <div>
                    <table id="gaia-table" align="center" border="0"
                        cellpadding="1" cellspacing="0">
                      <tr>
                        <td colspan="2" align="center">
                          <table>
                            <tr>
                              <td>
                                <span id="gaia-account-text-prefix"
                                    i18n-content="signinprefix"></span>
                              </td>
                              <td id="gaia-logo" valign="top">
                                <img src="google-transparent.png" alt="Google">
                              </td>
                              <td valign="middle">
                                <span id="gaia-account-text"
                                    i18n-content="signinsuffix"></span>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" align="center"> </td>
                      </tr>
                      <tr id="email-row">
                        <td nowrap="nowrap">
                          <div class="end-aligned">
                            <span i18n-content="emaillabel">
                            </span>
                          </div>
                        </td>
                        <td>
                          <input id="gaia-email" type="text" name="email"
                              size="18" value="">
                          <span id="email-readonly"></span>
                        </td>
                      </tr>
                      <tr id="access-code-label-row" class="access-code-row">
                        <td colspan="2">
                          <span i18n-content="enteraccesscode"></span>
                        </td>
                      </tr>
                      <tr id="access-code-help-row" class="access-code-row">
                        <td colspan="2">
                          <a i18n-values="href:getaccesscodeurl"
                              i18n-content="getaccesscodehelp" target="_blank">
                          </a>
                        </td>
                      <tr>
                        <td></td>
                        <td>
                          <div id="errormsg-0-email" class="errormsg"
                              i18n-content="cannotbeblank">
                          </div>
                        </td>
                      </tr>
                      <tr id="password-row">
                        <td class="end-aligned">
                          <span i18n-content="passwordlabel"></span>
                        </td>
                        <td>
                          <input id="gaia-passwd" type="password" name="passwd"
                              size="18">
                        </td>
                      </tr>
                      <tr id="access-code-input-row" class="access-code-row">
                        <td colspan="2">
                          <input id="access-code" type="password"
                              name="accessCode" size="18">
                        </td>
                      </tr>
                      <tr>
                        <td></td>
                        <td>
                          <div class="errormsgspacer">
                            <div id="errormsg-0-password" class="errormsg"
                                i18n-content="cannotbeblank">
                            </div>
                            <div id="errormsg-1-password" class="errormsg">
                              <span i18n-content="invalidcredentials"></span>
                              <!-- Brackets are intentional -->
                              [<a i18n-values="href:invalidpasswordhelpurl"
                                   target="_blank">?</a>]
                            </div>
                            <div id="errormsg-0-access-code" class="errormsg"
                                i18n-content="invalidaccesscode">
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2">
                          <div id="captcha-div">
                            <div id="captcha-instructions"
                                i18n-content="captchainstructions"
                                class="bottom-padded-cell">
                            </div>
                            <div class="bottom-padded-cell">
                              <div id="captcha-wrapper">
                                <div id="captcha-image"></div>
                              </div>
                            </div>
                            <div>
                              <input id="captcha-value" type="text"
                                  name="captchaValue" size="18" value="">
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" align="center">
                          <div id="errormsg-0-connection" class="errormsg"
                              i18n-content="couldnotconnect">
                          </div>
                        </td>
                      </tr>
                      <tr id="action-area">
                        <td colspan="2">
                          <table align="center" cellpadding="0"
                              cellspacing="0">
                            <tr>
                              <td>
                                <div id="logging-in-throbber" class="throbber">
                                </div>
                              </td>
                              <td class="no-vertical-padding">
                                <input id="sign-in" type="submit"
                                    i18n-content="signin">
                                </button>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                      <tr id="ga-fprow">
                        <td colspan="2" height="16.0"
                            align="center" valign="bottom">
                          <a i18n-values="href:cannotaccessaccounturl"
                              target="_blank"
                              i18n-content="cannotaccessaccount">
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td id="create-account-cell" colspan="2" height="16.0"
                            align="center" valign="bottom">
                          <div id="create-account-div">
                            <a i18n-values="href:createnewaccounturl"
                                i18n-content="createaccount" target="_blank">
                            </a>
                          </div>
                       </td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </form>
      </div>
      <div>
        <div id="cancel-space-no-captcha" colspan="2">
        </div>
      </div>
    </div>
    <div class="action-area">
      <div class="button-strip">
        <button id="sync-setup-cancel" type="reset" i18n-content="cancel">
        </button>
      </div>
    </div>
  </div>
  <div id="sync-setup-configure" class="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 i18n-values="href:encryptionhelpurl" target="_blank"
            i18n-content="learnMore"></a>
      </div>
      <div>
        <div class="action-area">
          <div class="action-area-link-container">
            <a id="customize-link" href="#" i18n-content="customizeLinkLabel">
            </a>
          </div>
          <div id="confirm-everything-throbber" class="throbber"></div>
          <input id="confirm-everything-ok" type="button"
              i18n-values="value:syncEverything">
          <input id="confirm-everything-cancel" type="button"
              i18n-values="value:cancel">
        </div>
      </div>
    </div>
    <div id="customize-sync-preferences" hidden>
      <h1 i18n-content="syncSetupConfigureTitle"></h1>
      <form id="chooseDataTypesForm">
        <div id="sync-configure-content" class="content-area">
          <div id="sync-select-container">
            <select id="sync-select-datatypes">
              <option i18n-content="keepeverythingsynced" selected></option>
              <option i18n-content="choosedatatypes"></option>
            </select>
            <div id="chooseDataTypesBody">
              <div>
                <!-- Apps -->
                <div class="sync-item-show" id="appsItem">
                  <input id="appsCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="appsCheckboxLabel" name="dataTypeLabel"
                      for="appsCheckbox" i18n-content="apps"
                      i18n-values="title:apps"></label>
                </div>
                <!-- Autofill -->
                <div class="sync-item-show" id="autofillItem">
                  <input id="autofillCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="autofillCheckboxLabel" name="dataTypeLabel"
                         for="autofillCheckbox" i18n-content="autofill"
                         i18n-values="title:autofill"></label>
                </div>
                <!-- Bookmarks -->
                <div class="sync-item-show" id="bookmarksItem">
                  <input id="bookmarksCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="bookmarksCheckboxLabel" name="dataTypeLabel"
                         for="bookmarksCheckbox" i18n-content="bookmarks"
                         i18n-values="title:bookmarks"></label>
                </div>
                <!-- Extensions -->
                <div class="sync-item-show" id="extensionsItem">
                  <input id="extensionsCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="extensionsCheckboxLabel" name="dataTypeLabel"
                         for="extensionsCheckbox" i18n-content="extensions"
                         i18n-values="title:extensions"></label>
                </div>
                <!-- Omnibox -->
                <div class="sync-item-show" id="omniboxItem">
                  <input id="typedUrlsCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="typedUrlsCheckboxLabel" name="dataTypeLabel"
                         for="typedUrlsCheckbox" i18n-content="typedurls"
                         i18n-values="title:typedurls"></label>
                </div>
                <!-- Passwords -->
                <div class="sync-item-show" id="passwordsItem">
                  <input id="passwordsCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="passwordsCheckboxLabel" name="dataTypeLabel"
                         for="passwordsCheckbox" i18n-content="passwords"
                         i18n-values="title:passwords"></label>
                </div>
                <!-- Preferences -->
                <div class="sync-item-show" id="preferencesItem">
                  <input id="preferencesCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="preferencesCheckboxLabel" name="dataTypeLabel"
                         for="preferencesCheckbox" i18n-content="preferences"
                         i18n-values="title:preferences"></label>
                </div>
                <!-- Themes -->
                <div class="sync-item-show" id="themesItem">
                  <input id="themesCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="themesCheckboxLabel" name="dataTypeLabel"
                      for="themesCheckbox" i18n-content="themes"
                      i18n-values="title:themes"></label>
                </div>
                <!-- Sessions -->
                <div class="sync-item-show" id="sessionsItem">
                  <input id="sessionsCheckbox" type="checkbox"
                      name="dataTypeCheckbox">
                  <label id="sessionsCheckboxLabel" name="dataTypeLabel"
                         for="sessionsCheckbox" i18n-content="foreignsessions"
                         il8n-values="title:sessions"></label>
                </div>
              </div>
            </div>
          </div>
          <div class="sync-errors">
            <span id="error-text" i18n-content="synczerodatatypeserror"
                  class="sync-error-hide"></span>
            <span id="aborted-text" i18n-content="abortederror"
                  class="sync-error-hide"></span>
          </div>
          <hr>
          <h4 i18n-content="passphraseSectionTitle"></h4>
          <div id="sync-passphrase-container">
            <div id="passphrase-encryption-message"
                i18n-content="passphraseEncryptionMessage"></div>
            <div>
              <input id="google-option" name="option" type="radio"
                  value="google">
              <label for="google-option" i18n-content="googleOption"></label>
            </div>
            <div>
              <input id="explicit-option" name="option" type="radio"
                  value="explicit">
              <label for="explicit-option" i18n-content="explicitOption">
              </label>
              <a i18n-values="href:encryptionhelpurl" target="_blank"
                  i18n-content="learnMore"></a>
            </div>
            <div id="sync-custom-passphrase" hidden>
              <div id="sync-passphrase-message">
                <span i18n-content="sectionExplicitMessagePrefix"></span>
                <a href="http://google.com/dashboard" target="_blank"
                    i18n-content="sectionExplicitMessagePostfix"></a>
                <span>.</span>
              </div>
              <div class="sync-custom-passphrase-input">
                <input id="custom-passphrase" type="password"
                    i18n-values="placeholder:passphraseLabel">
              </div>
              <div class="sync-custom-passphrase-input">
                <input id="confirm-passphrase" type="password"
                    i18n-values="placeholder:confirmLabel">
              </div>
              <div class="error" style="display:none"
                  id="emptyerror" i18n-content="emptyErrorMessage"></div>
              <div class="error" style="display:none"
                  id="mismatcherror" i18n-content="mismatchErrorMessage"></div>
            </div>
          </div>
        </div>
        <div class="action-area">
          <div class="action-area-link-container">
            <a id="use-default-link" href="#" i18n-content="useDefaultSettings">
            </a>
          </div>
          <div id="choose-datatypes-throbber" class="throbber"></div>
          <input id="choose-datatypes-ok" type="submit" i18n-values="value:ok">
          <input id="choose-datatypes-cancel" type="button"
              i18n-values="value:cancel">
        </div>
      </form>
    </div>
  </div>
  <div id="sync-setup-passphrase" class="hidden">
    <h1 i18n-content="enterPassphraseTitle"></h1>
    <div class="content-area">
      <form id="passphraseForm">
        <div id="enter-passphrase">
          <div id="normalBody" class="sync-instructions-start-hidden"
               i18n-content="enterPassphraseBody"></div>
          <div id="passphraseRejectedBody"
              class="sync-instructions-start-hidden"
              i18n-content="enterOtherPassphraseBody"></div>
        </div>
        <div id="passphrase-input">
          <label id="passphraseLabel" name="passphraseLabel"
                 for="passphrase" i18n-content="passphraseLabel">
          </label>
          <input id="passphrase" name="passphrase" type="password">
          <div class="error" id="incorrectPassphrase"
               i18n-content="incorrectPassphrase">
          </div>
        </div>
        <span id="sync-passphrase-warning" i18n-content="passphraseRecover">
        </span> <a href="http://google.com/dashboard" target="_blank"
            i18n-content="cleardatalink"></a>
        <div class="overlay-warning" id="cancel-warning-box" hidden>
          <div id="cancel-warning-header" i18n-content="cancelWarningHeader">
          </div>
          <div id="cancel-warning" i18n-content="cancelWarning"></div>
          <input id="cancel-yes-button" type="submit" i18n-values="value:yes">
          <input id="cancel-no-button" type="submit" i18n-values="value:no">
        </div>
      </form>
    </div>
    <div class="action-area">
      <div id="passphrase-throbber" class="throbber"></div>
      <input id="passphrase-ok" type="submit" i18n-values="value:ok">
      <input id="passphrase-cancel" type="button" i18n-values="value:cancel">
    </div>
  </div>
</div>