    <style include="cr-shared-style settings-shared iron-flex passwords-shared">
      #savedPasswordsHeaders {
        /* This adds enough padding so that the labels are aligned with the
         * columns. It is necessary due to the absence of the "more actions"
         * button in the heading.
         */
        padding-inline-end: calc(
          var(--cr-icon-ripple-size) + var(--cr-icon-button-margin-start));
      }

      #undoLabel {
        display: flex;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #exportImportMenuButtonContainer {
        margin-inline-end: 0;
      }

      #checkPasswordsBannerContainer {
        line-height: 0;
        padding-top: 16px;
      }

      #banner {
        border-radius: 4px;
        width: 100%;
      }

      #checkPasswordsLinkRow iron-icon {
        --iron-icon-fill-color: var(--google-red-600);
        background: radial-gradient(circle 12px at 12px,
            rgb(252, 232, 230) 100%, transparent 100%);
        height: 16px;
        margin-inline-end: 16px;
        margin-inline-start: -4px;
        padding-bottom: 4px;
        padding-inline-end: 4px;
        padding-inline-start: 4px;
        padding-top: 4px;
        width: 16px;
      }

      @media (prefers-color-scheme: dark) {
        #checkPasswordsLinkRow iron-icon {
          --iron-icon-fill-color: var(--google-red-refresh-300);
          background: radial-gradient(circle 12px at 12px,
                                    var(--google-grey-900) 100%,
                                    transparent 100%);
        }
      }
   </style>
    <settings-toggle-button id="passwordToggle"
        aria-label="$i18n{passwords}" no-extension-indicator
        label="$i18n{passwordsSavePasswordsLabel}"
        pref="{{prefs.credentials_enable_service}}">
    </settings-toggle-button>
    <template is="dom-if"
        if="[[prefs.credentials_enable_service.extensionId]]">
      <div class="cr-row continuation">
        <extension-controlled-indicator class="flex"
            id="passwordsExtensionIndicator"
            extension-id="[[prefs.credentials_enable_service.extensionId]]"
            extension-name="[[
                prefs.credentials_enable_service.controlledByName]]"
            extension-can-be-disabled="[[
                prefs.credentials_enable_service.extensionCanBeDisabled]]">
        </extension-controlled-indicator>
      </div>
    </template>
    <settings-toggle-button id="autosigninCheckbox" class="hr"
        pref="{{prefs.credentials_enable_autosignin}}"
        label="$i18n{passwordsAutosigninLabel}"
        sub-label="$i18n{passwordsAutosigninDescription}">
    </settings-toggle-button>
    <template is="dom-if" if="[[enablePasswordCheck_]]">
      <div id="checkPasswordsBannerContainer" class="cr-row"
          hidden$="[[!shouldShowBanner_]]">
        <picture>
          <source
              srcset="chrome://settings/images/password_check_neutral_dark.svg"
              media="(prefers-color-scheme: dark)">
          <img id="banner" alt=""
              src="chrome://settings/images/password_check_neutral.svg">
        </picture>
      </div>
      <div id="checkPasswordsButtonRow" class="cr-row continuation"
          hidden$="[[!shouldShowBanner_]]">
        <div class="flex cr-padded-text">
          <div>$i18n{checkPasswords}</div>
          <div class="secondary">$i18n{checkPasswordsDescription}</div>
        </div>
        <cr-button id="checkPasswordsButton" class="action-button"
            on-click="onCheckPasswordsClick_">
          $i18n{checkPasswords}
        </cr-button>
      </div>
      <div class="cr-row" id="checkPasswordsLinkRow"
          on-click="onCheckPasswordsClick_" actionable
          hidden$="[[shouldShowBanner_]]">
        <iron-icon icon="cr:warning" id="checkPasswordWarningIcon"
            hidden$="[[!hasLeakedCredentials_]]"></iron-icon>
        <div class="flex cr-padded-text">
          <div>
            $i18n{checkPasswords}
          </div>
          <div class="secondary" id="checkPasswordLeakCount"
              hidden$="[[!hasLeakedCredentials_]]">
            [[compromisedPasswordsCount]]
          </div>
          <div class="secondary" id="checkPasswordLeakDescription"
              hidden$="[[hasLeakedCredentials_]]">
            $i18n{checkPasswordsDescription}
          </div>
        </div>
        <cr-icon-button class="subpage-arrow"
            aria-label="$i18n{checkPasswords}">
        </cr-icon-button>
      </div>
    </template>
    <div id="manageLink" class="cr-row two-line"
        hidden$="[[hidePasswordsLink_]]">
      <!-- This div lays out the link correctly, relative to the text. -->
      <div class="cr-padded-text">$i18nRaw{managePasswordsLabel}</div>
    </div>
    <div hidden$="[[!eligibleForAccountStorage_]]" class="cr-row"
         id="accountStorageButtonsContainer">
      <cr-button on-click="onOptIn_" id="optInToAccountStorageButton"
          class="flex" hidden$="[[isOptedInForAccountStorage_]]">
          $i18n{optInAccountStorageLabel}
      </cr-button>
      <cr-button on-click="onOptOut_" id="optOutOfAccountStorageButton"
          class="flex" hidden$="[[!isOptedInForAccountStorage_]]">
          $i18n{optOutAccountStorageLabel}
      </cr-button>
    </div>
    <div class="cr-row first">
      <h2 id="savedPasswordsHeading" class="flex">
        $i18n{savedPasswordsHeading}
      </h2>
      <template is="dom-if"
          if="[[showImportOrExportPasswords_(
                    showExportPasswords_, showImportPasswords_)]]">
        <cr-icon-button class="icon-more-vert header-aligned-button"
            id="exportImportMenuButton"
            on-click="onImportExportMenuTap_" title="$i18n{moreActions}"
            focus-type="exportImportMenuButton"
            aria-describedby="savedPasswordsHeading"></cr-icon-button>
      </template>
    </div>
    <div class="list-frame">
      <div id="savedPasswordsHeaders" class="list-item column-header"
          hidden$="[[!hasSome_(savedPasswords, savedPasswords.splices)]]"
          aria-hidden="true">
        <div class="website-column">$i18n{editPasswordWebsiteLabel}</div>
        <div class="username-column">
          $i18n{editPasswordUsernameLabel}
        </div>
        <div class="password-column">
          $i18n{editPasswordPasswordLabel}
        </div>
      </div>
      <iron-list id="passwordList" preserve-focus
          items="[[getFilteredMultiStorePasswords_(filter,
            multiStoreSavedPasswords.splices, isOptedInForAccountStorage_)]]"
          class="cr-separators list-with-header"
          scroll-target="[[subpageScrollTarget]]" risk-selection>
        <template>
          <password-list-item item="[[item]]" tabindex$="[[tabIndex]]"
              focus-row-index="[[index]]"
<if expr="chromeos">
              token-request-manager="[[tokenRequestManager_]]"
</if>
              first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
              last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}">
          </password-list-item>
        </template>
      </iron-list>
      <div id="noPasswordsLabel" class="list-item"
          hidden$="[[hasSome_(savedPasswords, savedPasswords.splices)]]">
        $i18n{noPasswordsFound}
      </div>
    </div>
    <cr-action-menu id="menu" role-description="$i18n{menu}">
      <template is="dom-if" if="[[enablePasswordCheck_]]">
        <button id="menuCopyPassword" class="dropdown-item"
            on-click="onMenuCopyPasswordButtonTap_"
            hidden$="[[activePassword.item.entry.federationText]]">
          $i18n{copyPassword}
        </button>
      </template>
      <button id="menuEditPassword" class="dropdown-item"
          on-click="onMenuEditPasswordTap_">$i18n{passwordViewDetails}</button>
      <button id="menuRemovePassword" class="dropdown-item"
          on-click="onMenuRemovePasswordTap_">$i18n{removePassword}</button>
    </cr-action-menu>
    <cr-action-menu id="exportImportMenu" role-description="$i18n{menu}">
      <button id="menuImportPassword" class="dropdown-item"
          on-click="onImportTap_" hidden="[[!showImportPasswords_]]">
        $i18n{import}
      </button>
      <button id="menuExportPassword" class="dropdown-item"
          on-click="onExportTap_" hidden="[[!showExportPasswords_]]">
        $i18n{exportMenuItem}
      </button>
    </cr-action-menu>
    <template is="dom-if" if="[[showPasswordsExportDialog_]]" restamp>
      <passwords-export-dialog
<if expr="chromeos">
        token-request-manager="[[tokenRequestManager_]]"
</if>
        on-passwords-export-dialog-close="onPasswordsExportDialogClosed_">
      </passwords-export-dialog>
    </template>
    <template is="dom-if" if="[[showPasswordEditDialog_]]" restamp>
      <password-edit-dialog on-close="onPasswordEditDialogClosed_"
<if expr="chromeos">
          token-request-manager="[[tokenRequestManager_]]"
</if>
          item="[[activePassword.item]]">
      </password-edit-dialog>
    </template>
<if expr="chromeos">
    <template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
      <settings-password-prompt-dialog on-token-obtained="onTokenObtained_"
          on-close="onPasswordPromptClosed_">
      </settings-password-prompt-dialog>
    </template>
</if>
    <cr-toast-manager duration="5000">
      <cr-button aria-label="$i18n{undoDescription}"
          on-click="onUndoButtonClick_">$i18n{undoRemovePassword}</cr-button>
    </cr-toast-manager>

    <div class="cr-row first">
      <h2 class="flex">$i18n{passwordExceptionsHeading}</h2>
    </div>
    <div class="list-frame vertical-list" id="passwordExceptionsList">
      <template is="dom-repeat" items="[[passwordExceptions]]"
          filter="[[passwordExceptionFilter_(filter)]]">
        <div class="list-item">
          <div class="start website-column">
            <site-favicon url="[[item.urls.link]]"></site-favicon>
            <a id="exception" href="[[item.urls.link]]" target="_blank">
              [[item.urls.shown]]
            </a>
          </div>
          <cr-icon-button class="icon-clear" id="removeExceptionButton"
              on-click="onRemoveExceptionButtonTap_" tabindex$="[[tabIndex]]"
              title="$i18n{deletePasswordException}"></cr-icon-button>
        </div>
      </template>
      <div id="noExceptionsLabel" class="list-item"
          hidden$="[[hasSome_(passwordExceptions)]]">
        $i18n{noExceptionsFound}
      </div>
    </div>