"#lockwise-header-content span"
    );
    const lockwiseCard = this.doc.querySelector(".card.lockwise-card");

    if (hasLogins) {
      lockwiseCard.classList.remove("no-logins");
      lockwiseCard.classList.add("has-logins");
      document.l10n.setAttributes(title, "passwords-title-logged-in");
      document.l10n.setAttributes(
        headerContent,
        "lockwise-header-content-logged-in"
      );
      this.renderContentForLoggedInUser(numLogins, potentiallyBreachedLogins);
    } else {
      lockwiseCard.classList.remove("has-logins");
      lockwiseCard.classList.add("no-logins");
      document.l10n.setAttributes(title, "lockwise-title");
      document.l10n.setAttributes(headerContent, "passwords-header-content");
    }

    const lockwiseUI = document.querySelector(".card.lockwise-card.loading");
    lockwiseUI.classList.remove("loading");
  }

  /**
   * Displays strings indicating stored logins for a user.
   *
   * @param {number}  storedLogins
   *        The number of browser-stored logins.
   * @param {number}  potentiallyBreachedLogins
   *        The number of potentially breached logins.
   */
  renderContentForLoggedInUser(storedLogins, potentiallyBreachedLogins) {
    const lockwiseScannedText = this.doc.getElementById(
      "lockwise-scanned-text"
    );
    const lockwiseScannedIcon = this.doc.getElementById(
      "lockwise-scanned-icon"
    );
    const lockwiseCard = this.doc.querySelector(".card.lockwise-card");

    if (potentiallyBreachedLogins) {
      document.l10n.setAttributes(
        lockwiseScannedText,
        "lockwise-scanned-text-breached-logins",
        {
          count: potentiallyBreachedLogins,
        }
      );
      lockwiseScannedIcon.setAttribute(
        "src",
        "chrome://browser/skin/protections/breached-password.svg"
      );
      lockwiseCard.classList.add("breached-logins");
    } else {
      document.l10n.setAttributes(
        lockwiseScannedText,
        "lockwise-scanned-text-no-breached-logins",
        {
          count: storedLogins,
        }
      );
      lockwiseScannedIcon.setAttribute(
        "src",
        "chrome://browser/skin/protections/resolved-breach.svg"
      );
      lockwiseCard.classList.add("no-breached-logins");
    }

    const howItWorksLink = this.doc.getElementById("lockwise-how-it-works");
    howItWorksLink.href = HOW_IT_WORKS_URL_PREF;
  }
}
PK