<!DOCTYPE html>

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<html>
  <head>
    <meta http-equiv="Content-Security-Policy"
          content="default-src chrome:; object-src 'none'">
    <meta name="referrer" content="no-referrer">
    <link rel="stylesheet" type="text/css"
          href="chrome://global/skin/in-content/common.css">
    <link rel="stylesheet" type="text/css"
          href="chrome://browser/content/urlbar/quicksuggestOnboarding.css">
    <link rel="localization" href="branding/brand.ftl">
    <link rel="localization" href="toolkit/branding/brandings.ftl"/>
    <link rel="localization" href="preview/firefoxSuggest.ftl">
    <script src="chrome://browser/content/urlbar/quicksuggestOnboarding.js"></script>
  </head>
  <body role="dialog" aria-labelledby="introduction-title">
    <section id="introduction-section">
      <button id="onboardingClose"
              class="ghost-button"
              tabindex="3"
              data-l10n-id="firefox-suggest-onboarding-introduction-close-button">
        <img src="chrome://global/skin/icons/close.svg" />
      </button>
      <span class="logo" role="presentation"></span>
      <h1 id="introduction-title" class="title"></h1>
      <div class="description-section">
        <h2 id="introduction-description"
            class="description"
            tabindex="-1"
            data-l10n-id="firefox-suggest-onboarding-main-description-9">
          <a id="onboardingLearnMoreOnIntroduction"
             tabindex="2"
             data-l10n-name="learn-more-link"></a>
        </h2>
        <h3 id="introduction-privacy-first"
            class="privacy-first"
            tabindex="-1"
            data-l10n-id="firefox-suggest-onboarding-main-privacy-first"></h2>
        <div id="introduction-image" role="presentation"></div>
      </div>
      <div class="buttonBox">
        <button id="onboardingNext" class="primary" tabindex="1"></button>
        <div class="pager">
          <span class="current"></span>
          <span></span>
        </div>
      </div>
    </section>
    <section id="main-section">
      <span class="logo" role="presentation"></span>
      <h1 id="main-title" class="title"></h1>
      <div class="description-section">
        <h2 id="main-description" class="description" tabindex="-1">
          <a id="onboardingLearnMore"
             tabindex="4"
             data-l10n-name="learn-more-link"></a>
        </h2>
        <h3 id="main-privacy-first"
            class="privacy-first"
            tabindex="-1"
            data-l10n-id="firefox-suggest-onboarding-main-privacy-first"></h2>
      </div>
      <div class="option accept">
        <input id="onboardingAccept"
               type="radio"
               tabindex="5"
               name="search-experience"></input>
        <label for="onboardingAccept">
          <div id="main-accept-option-label" class="option-label">
            <a id="onboardingLearnMore"
               tabindex="6"
               data-l10n-name="learn-more-link"></a>
          </div>
          <div id="main-accept-option-description" class="option-description"></div>
        </label>
      </div>
      <div class="option reject">
        <input id="onboardingReject"
               type="radio"
               tabindex="7"
               name="search-experience"></input>
        <label for="onboardingReject">
          <div id="main-reject-option-label" class="option-label">
          </div>
          <div id="main-reject-option-description" class="option-description"></div>
        </label>
      </div>
      <div class="buttonBox">
        <button id="onboardingSubmit"
                class="primary"
                disabled="true"
                tabindex="8"
                data-l10n-id="firefox-suggest-onboarding-main-submit-button"></button>
        <a id="onboardingSkipLink"
           tabindex="9"
           data-l10n-id="firefox-suggest-onboarding-main-skip-link"></a>
        <div class="pager">
          <span></span>
          <span class="current"></span>
        </div>
      </div>
    </section>
  </body>
</html>
