<!-- 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/. -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src chrome: blob:; img-src https:; object-src 'none'"
    />
    <meta name="color-scheme" content="light dark" />
    <link rel="localization" href="toolkit/branding/brandings.ftl" />
    <link rel="localization" href="branding/brand.ftl" />
    <!-- Temporary "en-US"-only l10n strings -->
    <link rel="localization" href="preview/ion.ftl" />
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
    <link rel="stylesheet" href="chrome://browser/content/ion.css" />
    <script src="chrome://browser/content/ion.js"></script>
    <link rel="icon" href="chrome://browser/skin/ion.svg" />
    <title data-l10n-id="ion"></title>
  </head>

  <body>
    <div id="locale-notification" data-l10n-id="ion-us-only"></div>
    <div id="report-content">
      <header>
        <h1 id="title" data-l10n-id="ion-document-title"></h1>
        <button id="enrollment-button" class="primary"></button>
      </header>
      <div id="summary" data-l10n-id="ion-summary"></div>
      <details id="details" open>
        <summary data-l10n-id="ion-works-title"></summary>
        <p>
          <strong data-l10n-id="ion-works-bullet-get-started-title"></strong>
          <span data-l10n-id="ion-works-bullet-get-started-content"></span>
        </p>
        <p>
          <strong data-l10n-id="ion-works-bullet-enroll-title"></strong>
          <span data-l10n-id="ion-works-bullet-enroll-content"></span>
        </p>
        <p>
          <strong data-l10n-id="ion-works-bullet-control-title"></strong>
          <span data-l10n-id="ion-works-bullet-control-content"></span>
        </p>
      </details>
      <details id="data" open>
        <summary data-l10n-id="ion-your-data-title"></summary>
        <p data-l10n-id="ion-your-data-summary"></p>
        <ul>
          <li data-l10n-id="ion-your-data-bullet-know"></li>
          <li data-l10n-id="ion-your-data-bullet-lengths"></li>
          <li data-l10n-id="ion-your-data-bullet-leave"></li>
        </ul>
      </details>
      <p data-l10n-id="ion-your-data-learn-more">
        <a
          data-l10n-name="privacy-policy"
          class="privacy-policy"
          href="https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/pioneer-managing-account-data"
          target="_blank"
        ></a>
      </p>
      <h2 id="header-available-studies"></h2>
      <div id="available-studies"></div>
      <dialog id="join-ion-consent-dialog" class="modal" is="trapped-dialog">
        <h3 data-l10n-id="ion-consent-notice"></h3>
        <p data-l10n-id="ion-program-consent-intro"></p>
        <ul id="join-ion-consent" class="consent-list">
          <p data-l10n-id="ion-enroll-effective-date"></p>
          <p data-l10n-id="ion-enroll-summary"></p>
          <p data-l10n-id="ion-enroll-demographic"></p>
          <p data-l10n-id="ion-enroll-privacy-notice">
            <a
              data-l10n-name="privacy-notice"
              class="privacy-notice"
              href="https://www.mozilla.org/%LOCALE%/privacy/"
              target="_blank"
            ></a>
          </p>
          <h2 data-l10n-id="ion-enroll-what-we-collect"></h2>
          <p data-l10n-id="ion-enroll-collect-demographic"></p>
          <p data-l10n-id="ion-enroll-technical-data"></p>
          <p data-l10n-id="ion-enroll-interaction-data"></p>
          <p data-l10n-id="ion-enroll-location-data"></p>
          <p data-l10n-id="ion-enroll-data-disclosure">
            <a
              data-l10n-name="privacy-policy"
              class="privacy-policy"
              href="https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/pioneer-managing-account-data"
              target="_blank"
            ></a>
          </p>
          <h2 data-l10n-id="ion-enroll-how-we-use"></h2>
          <p data-l10n-id="ion-enroll-r-and-d"></p>
          <ul>
            <li data-l10n-id="ion-enroll-bullet-criteria"></li>
            <li data-l10n-id="ion-enroll-bullet-representative"></li>
            <li data-l10n-id="ion-enroll-bullet-improve-existing"></li>
            <li data-l10n-id="ion-enroll-bullet-create"></li>
          </ul>
          <h2 data-l10n-id="ion-enroll-who-we-disclose-to"></h2>
          <p data-l10n-id="ion-enroll-who-we-disclose-bullet-gcp"></p>
          <p data-l10n-id="ion-enroll-who-we-disclose-bullet-third-party"></p>
          <p data-l10n-id="ion-enroll-who-we-disclose-bullet-public">
            <a
              data-l10n-name="mozilla-manifesto"
              href="https://www.mozilla.org/about/manifesto/"
              target="_blank"
            ></a>
          </p>
          <h2 data-l10n-id="ion-enroll-data-management"></h2>
          <p data-l10n-id="ion-enroll-data-management-learn-more">
            <a
              data-l10n-name="privacy-policy"
              class="privacy-policy"
              href="https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/pioneer-managing-account-data"
              target="_blank"
            ></a>
            <a
              data-l10n-name="compliance-email"
              href="mailto:compliance@mozilla.com"
            ></a>
          </p>
        </ul>
        <footer>
          <button
            id="join-ion-accept-dialog-button"
            class="primary"
            data-l10n-id="ion-accept-participate"
          ></button>
          <button
            id="join-ion-cancel-dialog-button"
            data-l10n-id="ion-cancel"
          ></button>
        </footer>
      </dialog>
      <dialog id="leave-ion-consent-dialog" class="modal" is="trapped-dialog">
        <h3 data-l10n-id="leave-ion-consent-title"></h3>
        <ul id="leave-ion-consent" class="consent-list">
          <p data-l10n-id="leave-ion-consent-bullet-thanks"></p>
          <p data-l10n-id="leave-ion-consent-bullet-manage">
            <a
              data-l10n-name="privacy-policy"
              class="privacy-policy"
              href="https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/pioneer-managing-account-data"
              target="_blank"
            ></a>
          </p>
        </ul>
        <footer>
          <button
            id="leave-ion-cancel-dialog-button"
            class="primary"
            data-l10n-id="ion-cancel"
          ></button>
          <button
            id="leave-ion-accept-dialog-button"
            data-l10n-id="ion-accept-leave"
          ></button>
        </footer>
      </dialog>
      <dialog id="join-study-consent-dialog" class="modal" is="trapped-dialog">
        <h3 data-l10n-id="ion-consent-study-notice"></h3>
        <p data-l10n-id="ion-program-study-intro"></p>
        <ul id="join-study-consent" class="consent-list"></ul>
        <footer>
          <button
            id="join-study-accept-dialog-button"
            class="primary"
            data-l10n-id="ion-consent-study-join"
          ></button>
          <button
            id="join-study-cancel-dialog-button"
            data-l10n-id="ion-cancel"
          ></button>
        </footer>
      </dialog>
      <dialog id="leave-study-consent-dialog" class="modal" is="trapped-dialog">
        <h3 data-l10n-id="leave-study-consent-title"></h3>
        <ul id="leave-study-consent" class="consent-list">
          <p data-l10n-id="leave-study-consent-bullet-manage">
            <a
              data-l10n-name="privacy-policy"
              class="privacy-policy"
              href="https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/pioneer-managing-account-data"
              target="_blank"
            ></a>
          </p>
        </ul>
        <footer>
          <button
            id="leave-study-cancel-dialog-button"
            class="primary"
            data-l10n-id="ion-cancel"
          ></button>
          <button
            id="leave-study-accept-dialog-button"
            data-l10n-id="ion-consent-study-leave"
          ></button>
        </footer>
      </dialog>
    </div>
  </body>
</html>
