<!-- 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:; object-src 'none'"
    />
    <meta name="color-scheme" content="light dark" />
    <link rel="localization" href="branding/brand.ftl" />
    <link rel="localization" href="browser/protections.ftl" />
    <link rel="localization" href="toolkit/branding/accounts.ftl" />
    <link rel="localization" href="toolkit/branding/brandings.ftl" />
    <!-- Temporary "en-US"-only l10n strings -->
    <link rel="localization" href="preview/protections.ftl" />
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
    <link rel="stylesheet" href="chrome://browser/content/protections.css" />
    <link rel="icon" href="chrome://browser/skin/controlcenter/dashboard.svg" />
    <script
      type="module"
      src="chrome://browser/content/protections.mjs"
    ></script>
    <title data-l10n-id="protection-report-webpage-title"></title>
  </head>

  <body>
    <div class="new-banner vpn-banner hidden">
      <div class="banner-wrapper">
        <img
          class="icon light"
          src="chrome://browser/content/logos/vpn-light.svg"
        />
        <img
          class="icon dark"
          src="chrome://browser/content/logos/vpn-dark.svg"
        />
        <div class="wrapper">
          <div>
            <h3 class="banner-title" data-l10n-id="vpn-banner-header"></h3>
            <span class="content" data-l10n-id="vpn-banner-content"></span>
          </div>
          <a
            target="_blank"
            id="vpn-banner-link"
            data-l10n-id="get-vpn-link"
          ></a>
          <button
            class="exit-icon"
            data-l10n-id="protections-close-button2"
          ></button>
        </div>
      </div>
    </div>
    <div id="report-content">
      <h1
        id="report-title"
        data-l10n-id="protection-report-page-content-title"
      ></h1>
      <p
        id="report-summary"
        data-l10n-id="protection-report-page-summary-default"
      ></p>
      <p
        id="protection-settings"
        data-l10n-id="protection-report-settings-link"
        role="link"
        tabindex="0"
      ></p>
      <div class="card card-no-hover etp-card">
        <div class="card-header">
          <img
            class="icon light"
            src="chrome://browser/content/logos/tracking-protection.svg"
          />
          <img
            class="icon dark"
            src="chrome://browser/content/logos/tracking-protection-dark-theme.svg"
          />
          <div class="wrapper">
            <div>
              <h2 class="card-title" data-l10n-id="etp-card-title-always"></h2>
              <p
                id="etp-card-content"
                class="content"
                data-l10n-id="etp-card-content-description"
              ></p>
            </div>
            <a
              target="_blank"
              id="manage-protections"
              data-l10n-id="protection-report-manage-protections"
            ></a>
          </div>
        </div>
        <div class="card-body">
          <div class="body-wrapper">
            <p id="graph-week-summary"></p>
            <div id="graph-wrapper">
              <div
                id="graph"
                role="table"
                aria-labelledby="graphLegendDescription"
              >
                <div
                  id="private-window-message"
                  data-l10n-id="graph-private-window"
                ></div>
              </div>
              <div id="legend">
                <label
                  id="graphLegendDescription"
                  data-l10n-id="graph-legend-description"
                ></label>
                <input
                  id="tab-social"
                  data-type="social"
                  type="radio"
                  name="tabs"
                  aria-labelledby="socialLabel socialTitle"
                  aria-describedby="socialContent"
                  checked
                />
                <label id="socialLabel" for="tab-social" data-type="social">
                  <img
                    class="icon-small"
                    src="chrome://browser/skin/thumb-down.svg"
                    data-type="social"
                  />
                  <span data-type="social"></span>
                </label>

                <input
                  id="tab-cookie"
                  data-type="cookie"
                  type="radio"
                  name="tabs"
                  aria-labelledby="cookieLabel cookieTitle"
                  aria-describedby="cookieContent"
                />
                <label id="cookieLabel" for="tab-cookie" data-type="cookie">
                  <img
                    class="icon-small"
                    src="chrome://browser/skin/controlcenter/3rdpartycookies.svg"
                    data-type="cookie"
                  />
                  <span data-type="cookie"></span>
                </label>

                <input
                  id="tab-tracker"
                  data-type="tracker"
                  type="radio"
                  name="tabs"
                  aria-labelledby="trackerLabel trackerTitle"
                  aria-describedby="trackerContent"
                />
                <label id="trackerLabel" for="tab-tracker" data-type="tracker">
                  <img
                    class="icon-small"
                    src="chrome://browser/skin/canvas.svg"
                    data-type="tracker"
                  />
                  <span data-type="tracker"></span>
                </label>

                <input
                  id="tab-fingerprinter"
                  data-type="fingerprinter"
                  type="radio"
                  name="tabs"
                  aria-labelledby="fingerprinterLabel fingerprinterTitle"
                  aria-describedby="fingerprinterContent"
                />
                <label
                  id="fingerprinterLabel"
                  for="tab-fingerprinter"
                  data-type="fingerprinter"
                >
                  <img
                    class="icon-small"
                    src="chrome://browser/skin/fingerprint.svg"
                    data-type="fingerprinter"
                  />
                  <span data-type="fingerprinter"></span>
                </label>

                <input
                  id="tab-cryptominer"
                  data-type="cryptominer"
                  type="radio"
                  name="tabs"
                  aria-labelledby="cryptominerLabel cryptominerTitle"
                  aria-describedby="cryptominerContent"
                />
                <label
                  id="cryptominerLabel"
                  for="tab-cryptominer"
                  data-type="cryptominer"
                >
                  <img
                    class="icon-small"
                    src="chrome://browser/skin/controlcenter/cryptominers.svg"
                    data-type="cryptominer"
                  />
                  <span data-type="cryptominer"></span>
                </label>
                <div id="highlight"></div>
                <div id="highlight-hover"></div>
                <div id="social" class="tab-content">
                  <p
                    id="socialTitle"
                    class="content-title"
                    data-l10n-id="social-tab-title"
                  ></p>
                  <p id="socialContent" data-l10n-id="social-tab-contant">
                    <a
                      target="_blank"
                      id="social-link"
                      data-l10n-name="learn-more-link"
                    ></a>
                  </p>
                </div>
                <div id="cookie" class="tab-content">
                  <p
                    id="cookieTitle"
                    class="content-title"
                    data-l10n-id="cookie-tab-title"
                  ></p>
                  <p id="cookieContent" data-l10n-id="cookie-tab-content">
                    <a
                      target="_blank"
                      id="cookie-link"
                      data-l10n-name="learn-more-link"
                    ></a>
                  </p>
                </div>
                <div id="tracker" class="tab-content">
                  <p
                    id="trackerTitle"
                    class="content-title"
                    data-l10n-id="tracker-tab-title"
                  ></p>
                  <p id="trackerContent" data-l10n-id="tracker-tab-description">
                    <a
                      target="_blank"
                      id="tracker-link"
                      data-l10n-name="learn-more-link"
                    ></a>
                  </p>
                </div>
                <div id="fingerprinter" class="tab-content">
                  <p
                    id="fingerprinterTitle"
                    class="content-title"
                    data-l10n-id="fingerprinter-tab-title"
                  ></p>
                  <p
                    id="fingerprinterContent"
                    data-l10n-id="fingerprinter-tab-content"
                  >
                    <a
                      target="_blank"
                      id="fingerprinter-link"
                      data-l10n-name="learn-more-link"
                    ></a>
                  </p>
                </div>
                <div id="cryptominer" class="tab-content">
                  <p
                    id="cryptominerTitle"
                    class="content-title"
                    data-l10n-id="cryptominer-tab-title"
                  ></p>
                  <p
                    id="cryptominerContent"
                    data-l10n-id="cryptominer-tab-content"
                  >
                    <a
                      target="_blank"
                      id="cryptominer-link"
                      data-l10n-name="learn-more-link"
                    ></a>
                  </p>
                </div>
              </div>
            </div>
            <div id="graph-total-summary"></div>
          </div>
        </div>
        <div id="mobile-hanger" class="card-body hidden">
          <div class="body-wrapper">
            <button
              class="exit-icon"
              data-l10n-id="protections-close-button2"
            ></button>
            <div id="etp-mobile-content">
              <img
                class="mobile-app-icon"
                src="chrome://browser/content/logos/etp-mobile.svg"
              />
              <span>
                <h2 class="card-title" data-l10n-id="mobile-app-title"></h2>
                <p class="content">
                  <span data-l10n-id="mobile-app-card-content"></span>
                  <span
                    target="_blank"
                    id="mobile-app-links"
                    data-l10n-id="mobile-app-links"
                  >
                    <a
                      target="_blank"
                      id="android-mobile-inline-link"
                      data-l10n-name="android-mobile-inline-link"
                      href=""
                    ></a>
                    <a
                      target="_blank"
                      id="ios-mobile-inline-link"
                      data-l10n-name="ios-mobile-inline-link"
                      href=""
                    ></a>
                  </span>
                </p>
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- Markup for Monitor card. -->
      <section class="card card-no-hover monitor-card hidden">
        <div class="card-header">
          <img class="icon" src="chrome://browser/content/logos/monitor.svg" />
          <div class="wrapper">
            <div>
              <h2
                id="monitor-title"
                class="card-title"
                data-l10n-id="monitor-title"
              ></h2>
              <p id="monitor-header-content" class="content">
                <span>
                  <!-- Insert Monitor header content here. -->
                </span>
                <a
                  target="_blank"
                  href=""
                  id="monitor-link"
                  data-l10n-id="monitor-link"
                ></a>
              </p>
              <div class="monitor-scanned-wrapper">
                <img
                  class="icon-small"
                  src="chrome://global/skin/icons/reload.svg"
                />
                <span
                  class="monitor-scanned-text"
                  data-l10n-id="auto-scan"
                ></span>
              </div>
            </div>
            <a target="_blank" id="sign-up-for-monitor-link">
              <!-- Insert Monitor link content here. -->
            </a>
          </div>
        </div>
        <div class="card-body">
          <div class="body-wrapper">
            <div id="monitor-body-content">
              <div class="monitor-info-wrapper">
                <div class="monitor-block email">
                  <a
                    target="_blank"
                    id="monitor-stored-emails-link"
                    data-l10n-id="monitor-emails-tooltip"
                  >
                    <span class="monitor-stat">
                      <img
                        class="icon-med"
                        src="chrome://browser/skin/mail.svg"
                      />
                      <span data-type="stored-emails">
                        <!-- Display number of stored emails here. -->
                      </span>
                    </span>
                    <span
                      id="info-monitored-addresses"
                      class="info-text"
                    ></span>
                  </a>
                </div>
                <div class="monitor-block breaches">
                  <a
                    target="_blank"
                    id="monitor-known-breaches-link"
                    data-l10n-id="monitor-breaches-tooltip"
                  >
                    <span class="monitor-stat">
                      <img
                        class="icon-med"
                        src="chrome://browser/skin/fxa/avatar.svg"
                      />
                      <span data-type="known-breaches">
                        <!-- Display number of known breaches here. -->
                      </span>
                    </span>
                    <span id="info-known-breaches" class="info-text"></span>
                  </a>
                </div>
                <div class="monitor-block passwords">
                  <a
                    target="_blank"
                    id="monitor-exposed-passwords-link"
                    data-l10n-id="monitor-passwords-tooltip"
                  >
                    <span class="monitor-stat">
                      <img
                        class="icon-med"
                        src="chrome://browser/skin/login.svg"
                      />
                      <span data-type="exposed-passwords">
                        <!-- Display number of exposed passwords here. -->
                      </span>
                    </span>
                    <span id="info-exposed-passwords" class="info-text"></span>
                  </a>
                </div>
              </div>
              <div class="monitor-breaches-wrapper">
                <div class="monitor-breaches-header">
                  <img id="monitor-breaches-icon" />
                  <span id="monitor-breaches-title" />
                </div>
                <div class="monitor-breaches-description-wrapper">
                  <span
                    id="monitor-breaches-description"
                    class="content"
                  ></span>
                  <div class="monitor-breaches-link-wrapper">
                    <a id="monitor-breaches-link" target="_blank"></a>
                  </div>
                </div>
              </div>
              <div class="monitor-partial-breaches-wrapper">
                <div class="monitor-partial-breaches-header">
                  <img
                    id="monitor-partial-breaches-icon"
                    src="chrome://browser/skin/protections/resolved-breach-gray.svg"
                  />
                  <span id="monitor-partial-breaches-title"></span>
                  <span id="monitor-partial-breaches-percentage"></span>
                </div>
                <progress class="progress-bar" max="100"></progress>
                <div class="monitor-partial-breaches-motivation-text">
                  <span id="monitor-partial-breaches-motivation-title"></span>
                  <div class="monitor-partial-breaches-motivation-wrapper">
                    <span
                      id="monitor-partial-breaches-motivation-desc"
                      class="content"
                      data-l10n-id="monitor-partial-breaches-motivation-description"
                    ></span>
                    <div class="monitor-partial-breaches-link-wrapper">
                      <a
                        id="monitor-partial-breaches-link"
                        target="_blank"
                        data-l10n-id="monitor-resolve-breaches-link"
                      ></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Markup for passwords card. -->
      <section class="card card-no-hover lockwise-card hidden">
        <div class="card-header">
          <img class="icon" src="chrome://browser/content/logos/lockwise.svg" />
          <div class="wrapper">
            <div>
              <h2 id="lockwise-title" class="card-title">
                <!-- Insert Lockwise card title here. -->
              </h2>
              <p id="lockwise-header-content" class="content">
                <span>
                  <!-- Insert Lockwise header content here. -->
                </span>
                <a
                  target="_blank"
                  id="lockwise-how-it-works"
                  data-l10n-id="lockwise-how-it-works-link"
                  href=""
                ></a>
              </p>
            </div>
            <button
              id="save-passwords-button"
              class="primary"
              data-l10n-id="protection-report-passwords-save-passwords-button"
            ></button>
            <div class="lockwise-scanned-wrapper">
              <img id="lockwise-scanned-icon" />
              <span id="lockwise-scanned-text" class="content">
                <!-- Display message for stored logins here. -->
              </span>
            </div>
            <button
              id="manage-passwords-button"
              class="primary"
              data-l10n-id="protection-report-passwords-manage-passwords-button"
            ></button>
          </div>
        </div>
        <!-- <div class="card-body hidden">
          <div id="lockwise-body-content" class="body-wrapper">
            <div class="no-logins hidden">
            </div>
          </div>
        </div> -->
      </section>
      <!-- Markup for Proxy card -->
      <section class="card card-no-hover proxy-card hidden">
        <div class="card-header">
          <img
            class="icon light"
            src="chrome://browser/content/logos/proxy-light.svg"
          />
          <img
            class="icon dark"
            src="chrome://browser/content/logos/proxy-dark.svg"
          />
          <div class="wrapper">
            <div>
              <h3 class="card-title" data-l10n-id="proxy-title"></h3>
              <p class="content" data-l10n-id="proxy-header-content"></p>
            </div>
            <a
              target="_blank"
              id="get-proxy-extension-link"
              data-l10n-id="get-proxy-extension-link"
            ></a>
          </div>
        </div>
      </section>

      <section class="card card-no-hover vpn-card hidden">
        <div class="card-header">
          <img
            class="icon light"
            src="chrome://browser/content/logos/vpn-light.svg"
          />
          <img
            class="icon dark"
            src="chrome://browser/content/logos/vpn-dark.svg"
          />
          <div class="wrapper">
            <div>
              <div class="title-wrapper">
                <img
                  id="check-icon"
                  src="chrome://browser/skin/protections/resolved-breach.svg"
                />
                <h3 class="card-title" data-l10n-id="vpn-title"></h3>
              </div>
              <p class="content" data-l10n-id="vpn-header-content"></p>
              <p
                class="content subscribed"
                data-l10n-id="vpn-header-content-subscribed"
              >
                <a
                  target="_blank"
                  id="vpn-google-playstore-link"
                  data-l10n-name="vpn-google-playstore-link"
                ></a>
                <a
                  target="_blank"
                  id="vpn-app-store-link"
                  data-l10n-name="vpn-app-store-link"
                ></a>
              </p>
            </div>
            <a
              target="_blank"
              id="get-vpn-link"
              data-l10n-id="get-vpn-link"
            ></a>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>
